JSON Drag-and-Drop Form Builder

A versatile React-based drag-and-drop form builder that allows users to create dynamic forms using a JSON schema. It supports various field types, conditional logic, and PDF integration.

Features

• Drag-and-Drop Interface: Easily build forms by dragging and dropping components.
• Diverse Field Types: Includes Checkbox, Date, File, Label, Number, Radio, Select, Signature, Text Area, and Text Field components.
• Conditional Logic: Implement complex conditional rules for form fields.
• PDF Integration: Generate and edit PDFs based on form data.
• JSON Schema Driven: Define forms using a flexible JSON schema.
• DND-Kit Integration: Leverages @dnd-kit for robust drag-and-drop functionality.
• JSONForms Support: Utilizes @jsonforms for efficient form rendering.

Installation

To get started with the project, follow these steps:

1. Clone the repository:

   git clone https://github.com/defensestation/dnd-json-form-builder.git
   cd json-dnd-form-builder

   (Note: Replace https://github.com/defensestation/dnd-json-form-builder.git with the actual repository URL.)

2. Install dependencies using pnpm:

   pnpm install

Usage

Development

To run the project in development mode:

pnpm dev

This will start the development server, usually accessible at http://localhost:5173.

To see an example of the form builder in action, you can run the development server and view the src/Main.tsx file, which serves as an example implementation.

Building for Production

To build the project for production:

pnpm build

The build output will be located in the dist directory.

Preview Production Build

To preview the production build locally:

pnpm preview

Linting

To run ESLint checks:

pnpm lint

Dependencies

The following are the direct dependencies used in this project:

• ajv: ^8.17.1
• cmdk: ^1.1.1
• compressorjs: ^1.2.1
• date-fns: ^4.1.0
• framer-motion: ^12.23.12
• lodash: ^4.17.21
• pdf-lib: ^1.17.1
• react-colorful: ^5.6.1
• react-cropper: ^2.3.3
• react-day-picker: ^9.9.0
• react-hook-form: ^7.62.0
• react-icons: ^5.5.0
• react-markdown: ^10.1.0
• react-pdf: ^10.1.0
• remark-gfm: ^4.0.1
• sonner: ^2.0.7
• uuid: ^11.1.0
• zod: ^4.1.5

Peer Dependencies

These dependencies are expected to be provided by the consuming application:

• react: >=18
• react-dom: >=18
• @dnd-kit/core: ^6.3.1
• @dnd-kit/modifiers: ^9.0.0
• @dnd-kit/sortable: ^10.0.0
• @jsonforms/core: ^3.6.0
• @jsonforms/react: ^3.6.0
• @jsonforms/vanilla-renderers: ^3.6.0
• @tailwindcss/vite: ^4.1.12
• class-variance-authority: ^0.7.1
• clsx: ^2.1.1
• lucide-react: ^0.542.0
• tailwind-merge: ^3.3.1
• tailwindcss: ^4.1.12

json-form-viewer