I Built a Drag-and-Drop React Form Builder with Zod & React Hook Form – Here’s How

Like many React devs, I often found myself rebuilding forms again and again — manually wiring up inputs, validations, conditional fields, and handling submission logic. It got repetitive and frustrating.

So I decided to build something to fix that.

🎯 The Goal:
Create a visual form builder using React that allows developers to:

Drag and drop form fields

Edit their properties visually

Preview the final form live

Export the form as a ready-to-use React component with:

Zod validation

React Hook Form integration

TypeScript types

And so, FormCraft was born.

🔨 Tech Stack
React 18 with hooks and concurrent features

TypeScript for full type safety

Zustand for global state management

@dnd-kit for drag-and-drop

React Hook Form for performant form handling

Zod for schema validation

Tailwind CSS + shadcn/ui for styling

The app is bundled with Vite for blazing-fast dev experience.

🧪 Features at a Glance
✅ Core Features:
Drag & Drop interface (powered by @dnd-kit)

Live preview panel

Export as:

JSON Schema

React + Zod + RHF component

Built-in templates: Contact, Registration, Survey, etc.

🔧 Advanced Features:
Multi-step forms (with step navigation)

Conditional fields (e.g., "show field X if option Y is selected")

Field-level validation with:

Min/max length

Custom regex

Custom error messages

Dark/Light theme (based on system preference or manual toggle)

📦 Form Field Types Supported
Text, Email, Password, Number, Tel, URL

Textarea, Select, Radio, Checkbox

Date, Time, File Upload

🧱 How It Works Behind the Scenes

1. Form Schema State
   All forms are stored as JSON schemas in Zustand. Each field has a unique ID, type, label, validation config, and conditional logic (if applicable).

2. Drag & Drop UI
   Using @dnd-kit, users can drag field types from the left panel into the form canvas. Fields can be reordered and grouped into steps.

3. Live Preview
   The right panel renders a functional React Hook Form version of the form using the internal schema.

4. Export Options
   When ready, users can export:

The raw form schema (JSON)

A working .tsx component with all field logic and Zod validation baked in

Here’s a sample generated form export:

tsx
Copy
Edit
const schema = z.object({
email: z.string().email(),
name: z.string().min(2),
});

const { register, handleSubmit, formState: { errors } } = useForm({
resolver: zodResolver(schema),
});
Pretty slick, right?

🌐 Try the Demo
👉 Live Demo -https://form-craft.onrender.com/

No sign-up needed. Just open it and start building.

🙏 Why I Built It
I wanted to prove to myself that I could:

Build something useful from scratch

Work with modern React tools (like RHF, Zod, Zustand)

Make something other devs could actually use

Honestly, if even a few developers find it helpful, that’s a win for me.