https://github.com/namanrox/json-schema-builder
JSON Schema Builder Frontend
https://github.com/namanrox/json-schema-builder
antd react-hooks-form reactjs vite
Last synced: 8 months ago
JSON representation
JSON Schema Builder Frontend
- Host: GitHub
- URL: https://github.com/namanrox/json-schema-builder
- Owner: namanrox
- Created: 2025-07-19T11:48:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-07-19T13:45:22.000Z (8 months ago)
- Last Synced: 2025-07-19T16:52:07.224Z (8 months ago)
- Topics: antd, react-hooks-form, reactjs, vite
- Language: TypeScript
- Homepage: https://json-schema-builder-s54m.vercel.app/
- Size: 49.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JSON Schema Builder
A dynamic React-based web application that allows users to visually create and preview JSON schemas through an intuitive form interface. Built with TypeScript and Ant Design, this tool enables the creation of deeply nested schemas with instant form previews and schema outputs.
## 🚀 Features
* ✅ Add/edit/remove fields dynamically
* 🔁 Support for nested fields (recursive structure)
* 📦 Real-time JSON schema preview
* 🧪 Sample form auto-generated based on the current schema
* 🧼 Form submission and reset functionality
* ⚛️ Built with React + TypeScript + React Hook Form
* 🎨 UI components powered by Ant Design
## 📸 Demo
Experience the live demo of the application on Vercel: [JSON Schema Builder](https://json-schema-builder-s54m.vercel.app/)
* On clicking the ``Submit`` button:
---
## 🧰 Tech Stack
* **React** (with TypeScript)
* **React Hook Form** – for managing form state
* **Ant Design** – for sleek UI components
* **Vite** (assumed build tool)
---
## 🧑💻 Getting Started
### Prerequisites
* Node.js ≥ 14
* npm or yarn
### Installation
```bash
# Clone the repo
git clone https://github.com/namanrox/json-schema-builder.git
cd json-schema-builder
# Install dependencies
npm install
# Start development server
npm run dev
```
Visit `http://localhost:5173` to open the app.
---
## 📤 Usage
1. Click `+ Add Field` to add a new field.
2. Enter the **field name** and select its **type** (`string`, `number`, or `nested`).
3. For nested types, you can further add inner fields.
4. Fill out the preview form and click `Submit` to view formatted form data.
5. You can also reset the sample input fields by clicking on the ``Reset`` button.
6. View the generated JSON schema on the right panel.