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, Valibot, or ArkType.
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
- Valibot
- ArkType
- shadcn/ui
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.
- A field for every input
- Inputs, passwords, textareas, selects, checkboxes, switches, radios, sliders, comboboxes, and date pickers — each fully configurable.
- Validation, your way
- Toggle requirements, lengths and ranges in the UI and get a matching Zod, Valibot or ArkType 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 validation 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
Every field type you need, ready to ship.
Every field maps to a real shadcn/ui component with configurable labels, descriptions, defaults, and validation.
Input
Text, email, URL, tel and number.
Password
Masked input with a show/hide toggle.
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.
Date
Single date or range, with bounds.
Start building your form now.
No signup, no setup. Open the builder and copy production-ready code straight into your project.