JSON Form Designer

A visual drag-and-drop form builder designed for creating JSON Schema forms. This tool allows you to visually construct forms and export the resulting JSON Schema, making it compatible with libraries like react-jsonschema-form.

Features

• Visual Editor: Drag and drop interface to build forms intuitively.
• JSON Schema Export: Automatically generates valid JSON Schema from your visual layout.
• Custom Fields: Includes specialized fields like:
  • Block Layouts
  • Expandable Cards
  • External Links
  • Buttons
  • Lists
• Modern UI: Built with Shadcn UI and Tailwind CSS for a clean, modern aesthetic.
• Responsive Design: Works on desktop and mobile devices.

Project Structure

• src/components/formBuilder: Core logic for the form builder.
  • FormCanvas.tsx: The main drag-and-drop area.
  • FieldPalette.tsx: Sidebar with available fields.
  • PropertyPanel.tsx: Configuration panel for selected fields.
  • SchemaViewer.tsx: Real-time JSON schema preview.
• src/components/ui: Reusable UI components from Shadcn UI.

Technologies Used

• Framework: React + TypeScript + Vite
• Styling: Tailwind CSS
• Components: Shadcn UI
• Form Handling: React JSON Schema Form (@rjsf/core)
• Drag & Drop: dnd-kit

Getting Started

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev