Open Source Form Builder

Drag. Drop. Ship.

Visual form builder that generates production-ready React components. No boilerplate. No guessing. Just code.

Formly Builder

Fields

Text
Number
Textarea
Checkbox
Date
File

Canvas

Full Nametext
Email Addressemail
Passwordpassword
Drop field here
RegistrationForm.tsx
Built withNext.js 16React 19TypeScriptTailwind CSS v4shadcn/uiZustand@dnd-kitReact Hook FormFormikYup
Features

Everything in one canvas

Six capabilities. Zero context switching.

Drag & Drop Builder

Intuitively arrange fields on a live canvas. Reorder with a grab, resize with a click.

Full Name
Email
Message

10+ Field Types

Text, email, password, number, textarea, select, checkbox, radio, date, and file upload.

Aa
@
••
#
▾
☐
◉
📅
📎

Code Generation

Export TypeScript components for React Hook Form or Formik. Copy and ship.

const { control } = useForm()
<Controller name="email" />

Interactive Testing

Test your forms in real-time with live validation. See submitted data formatted as JSON.

user@example.com
••••••••
Submit
Valid
{
"email": "user@...",
"password": "••••"
}

Custom Themes

Presets or custom CSS variables. Match any brand.

Side-by-Side Layout

Toggle fields between full and half-width for compact multi-column forms.

First Name
Last Name
Email Address
Workflow

Three steps. Zero friction.

01

Design

Drag field components from the palette onto your canvas. Arrange, reorder, and set half-width layouts visually.

Text Input
Email
Password
02

Configure

Set labels, placeholders, validation rules, and field-specific settings. Toggle required, add patterns, min/max.

Label
Email Address
Name
email
Rules
requiredpattern
03

Generate

One click. Clean TypeScript component with full validation. React Hook Form or Formik — your choice.

export const MyForm() {
const { control } = useForm();
return <form>...</form>
}
Output

From visual to production

What you build on the canvas becomes clean, typed, validated React code.

Visual Builder
John Doe
john@example.com
+1 555 0123
Tell us about your project...
Submit
Generated OutputContactForm.tsx
import { useForm, Controller } from 'react-hook-form'; interface ContactFormData { name: string; email: string; phone?: string; message: string; } export const ContactForm = () => { const { control, handleSubmit } = useForm<ContactFormData>(); return ( <form onSubmit={handleSubmit(onSubmit)}> <Controller name="name" control={control} rules={{required: true}} /> // ... more fields </form> ); };

Stop writing form boilerplate.

Build it visually. Generate the code. Ship faster.