🧩 JSON Schema Builder

A dynamic JSON Schema Builder built with ReactJS, TypeScript, ShadCN UI, and React Hook Form.

🚀 Live Demo: https://json-schema-build.vercel.app

📽️ Demonstration Video

Watch how the schema builder works in action:
🎥 View on Google Drive

---

📝 Project Description

This tool enables users to create and preview dynamic JSON schemas by adding fields of type String, Number, or Nested. Each nested field can recursively contain other fields.

💡 Features

• 🖋️ Edit the name/key of a field
• ➕ Add more fields dynamically
• ❌ Delete a field
• 🔁 Add nested fields recursively
• 🪄 Live JSON Preview tab (updates in real time)
• ✅ Default values for string and number types

---

🧰 Tech Stack

• ReactJS (with Vite)
• TypeScript
• ShadCN UI (Tailwind + Radix UI)
• React Hook Form for managing form state
• Vercel for deployment

---

🗂️ Folder Structure (Simplified)

src/ ├── components/ │ ├── SchemaBuilder.tsx # Main builder component │ └── JSONPreview.tsx # Real-time JSON preview ├── pages/ │ └── index.tsx # Main page ├── App.tsx └── main.tsx

yaml Copy Edit

---

📦 Getting Started

🚀 Deployment This project is deployed on Vercel:

🔗 https://json-schema-build.vercel.app