JSON Schema Builder

A minimal JSON schema builder built with Next.js, TypeScript, and Tailwind CSS, designed for real-time schema editing with full nesting support.

Live Demo

Click Here to see the live demo.

Problem Statement

The goal was to create a dynamic and interactive JSON schema editor that allows users to:

• Realtime edit schema structure.
• Support nested fields (deep nesting allowed).
• Maintain schema as a valid JSON object, not an array of field definitions.
• Allow custom key names for all key fields.
• Enable editing and deletion at any nesting level.

🧪 Example Output

{
  "Name": {
    "First Name": "string",
    "Middle Name": "string",
    "Last Name": "string"
  },
  "Phone": "number",
  "Address": {
    "City": "string",
    "State": "string"
  }
}

⚙️ Features

• Custom Keys: Define any key name at any level.
• Nested Fields: Add fields inside other fields (recursive nesting).
• Real-time Editing: All changes reflect instantly in the schema view.
• Delete Support: Delete fields from any level of nesting.
• Minimal UI: Clean and intuitive interface using Tailwind CSS.

Preview

🛠️ Built With

• Next.js
• TypeScript
• Tailwind CSS

📦 Getting Started

1. Clone the repo

   git clone https://github.com/MAYANK-T0MAR/json_schema_builder.git
   cd json-schema-builder

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open http://localhost:3000 in your browser.

🤝 Contributing

Pull requests are welcome. If you have suggestions for improvements or new features, feel free to open an issue or create a PR.

---

Built for Fun using modern frontend tools.