Form Builder
Drag fields into a form, set the rules, and preview the real thing.
AdvancedWeb appDev tool16–32hAI-buildable 3/5no setupworth shipping
Build forms visually: drag field types in, reorder them, configure validation, then preview a working form. Conditional logic — show this field only when that answer is given — is what elevates it from a toy, and it needs a real dependency graph.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A palette of field types that drag into the form
- Fields reorder by drag and delete individually
- Per-field configuration including label, placeholder and validation
- Conditional visibility rules based on other fields' answers
- A preview mode renders the working form with live validation
- The form definition exports as JSON
- Circular conditional rules are detected and refused
The interesting part
- A conditional-logic graph that can't loop
- Keeping the builder state and the preview's runtime state separate
- Drag-and-drop reordering that is also keyboard accessible
Once it works
- Add multi-page forms with progress
- Add generated code output for a real form library
- Add a submissions view
Suggested stack
reacttypescripttailwinddnd-kitreact-hook-formzod