FormBuilder

App

Typeform / JotForm-style drag-to-build form designer. M1 ships the field palette (text / email / number / textarea / select / radio / checkbox / date / file — multiselect / signature / rating are palette stubs), a draggable canvas with reorder + duplicate + delete, a right-hand settings panel (label, name, placeholder, helper text, required, default value, options), JSON schema export / import, and a paired FormRenderer with required + email-format validation. Future milestones: full validation engine + custom validators (M2), conditional logic editor + runtime AST eval (M3), multi-page + save & resume (M4), schema I/O + webhooks + signature / rating (M5), full WAI-ARIA / keyboard parity + i18n + theming (M6). Pixel-identical EJS sibling at modules/app/FormBuilder/FormBuilder.ejs.

Preview

Contact form(5 fields)

Form

Code

const [schema, setSchema] = useState<FormSchema>(seed);
<FormBuilder schema={schema} onChange={setSchema} />

Preview

Contact form(5 fields)

Form

Code

const [schema, setSchema] = useState<FormSchema>(seed);
<>
  <FormBuilder schema={schema} onChange={setSchema} />
  <FormRenderer schema={schema} onSubmit={async (values) => persist(values)} />
</>

Preview

Code

<FormRenderer
  schema={STARTER_SCHEMA}
  onSubmit={async (values) => persist(values)}
/>

FormBuilder

Builder (drag + edit)

Form

Builder + live FormRenderer

Form

Contact form

Standalone renderer (required + email validation)

Contact form