Build forms visually. Ship production code.
Stop hand-wiring schemas, components, and validation. Drag fields, set the rules, and copy fully typed React Hook Form or TanStack Form code with Zod.
Build it right here — drag fields, set validation, switch libraries. Real generated code, not a mockup.
Generates code for the stack you already use
- React Hook Form
- TanStack Form
- Zod
- shadcn/ui
- TypeScript
Built for the boring part
A faster way to build real forms.
FormCanvas handles the wiring so you can focus on the form itself. Structure, validation, and the code you actually ship.
- Drag-and-drop editor
- Compose forms by dragging fields onto the canvas and reordering them — no boilerplate to write.
- Nine field types
- Inputs, textareas, selects, checkboxes, switches, radios, sliders, and comboboxes — each fully configurable.
- Zod validation built in
- Toggle requirements, lengths and ranges in the UI and get a matching Zod schema generated for you.
- Pick your form library
- Emit React Hook Form or TanStack Form from the same schema — switch output with a single click.
- Clean, copyable code
- Readable, typed TypeScript wired to real shadcn/ui components — copy it straight into your project.
- Live preview
- See the working form update as you build, with validation and submit behavior running in the browser.
How it works
From blank canvas to code in three steps.
- 1
Drag in your fields
Start from a blank canvas or a preset, then drop in the controls your form needs and order them.
- 2
Configure and validate
Set labels, placeholders, defaults and validation rules. The Zod schema updates as you go.
- 3
Copy the generated code
Choose React Hook Form or TanStack Form and copy production-ready code into your codebase.
Field library
Nine field types, each ready to ship.
Every field maps to a real shadcn/ui component with configurable labels, descriptions, defaults, and validation.
Input
Text, email, password, number and more.
Textarea
Multi-line text with configurable rows.
Select
Pick one option from a dropdown.
Checkbox
A single on/off boolean value.
Switch
A toggle for boolean settings.
Radio group
Choose one from a visible set.
Checkbox group
Select many options from a list.
Slider
Pick a number within a range.
Combobox
Searchable select, single or multi.
Start building your form now.
No signup, no setup. Open the builder and copy production-ready code straight into your project.