Type-safe Form Builder

Project steps

1. 01

   Field palette & canvas

   Drag-and-drop component with dnd-kit: drag fields (text, select, date, checkbox) onto the canvas.

2. 02

   Field config panel

   Clicking a field opens a configuration panel (label, placeholder, validations).

3. 03

   Schema Zod generator

   From the form configuration, generate an equivalent Zod schema object.

4. 04

   Live preview

   Render the generated form with react-hook-form and Zod schema in real-time.

5. 05

   Export code

   Export button that generates the TSX code for the form component.