Form Builder
Form Builder
A schema-driven form builder where you create fields, preview the generated form, submit responses, and inspect the resulting data - all client-side with zero backend.
Read the full notesThis program is best experienced on a larger display. Rotate your device, or scroll sideways at your own risk.
Builder
Define the form contract: title, fields, field types, options, and required state.
Preview
Fill out the generated form exactly as a visitor would experience it.
Results
Submitted responses, stored with schema snapshots so later builder edits do not rewrite history.
0 responses
No submissions yet. Fill out the Preview form to see results here.
Schema
The generated JSON contract that drives the preview and makes the feature inspectable.
form.schema.json
{
"title": "Project Inquiry Form",
"fields": [
{
"id": "26653f1a-a056-4aa8-8186-d4efcab0cb73",
"type": "short-text",
"label": "Full Name",
"required": true,
"placeholder": "Jane Doe",
"options": []
},
{
"id": "a75c3040-b230-457f-af71-ba4ee7d35b96",
"type": "short-text",
"label": "Email Address",
"required": true,
"placeholder": "you@example.com",
"options": []
},
{
"id": "165ce567-0e8a-4f24-9424-d1a6da17a69d",
"type": "select",
"label": "Project Type",
"required": true,
"placeholder": "",
"options": [
{
"id": "5b6ffe74-8c6f-477f-87c6-068522c0b6be",
"label": "Website"
},
{
"id": "2841f982-9025-4de4-8432-139cc772083b",
"label": "Web Application"
},
{
"id": "b55991a0-7551-439c-b4e7-0a1ea8d8e8c9",
"label": "Mobile App"
},
{
"id": "2731f95e-d572-4594-bb90-d87a0dac0b23",
"label": "Design System"
},
{
"id": "6c1472d2-cb59-4041-9cc1-5c57c1be8bc5",
"label": "Other"
}
]
},
{
"id": "5841513b-fc8d-4004-ac52-661c1ea628dc",
"type": "long-text",
"label": "Project Description",
"required": true,
"placeholder": "Tell me about your project...",
"options": []
},
{
"id": "06a28a60-c1da-4952-ad21-ff654ac4f72f",
"type": "date",
"label": "Preferred Start Date",
"required": false,
"placeholder": "",
"options": []
}
]
} Overview
A Google Forms-style builder running entirely in the browser. You define fields and their types, configure options and validation, then flip to a live preview generated from the same schema. Submitting the preview appends to a results view, closing the full builder → renderer → submission → results product loop on a single page.
Why it matters
Almost every product eventually needs a way for users to define their own data shapes. The same builder-preview-results pattern powers client intake forms, HR onboarding workflows, survey builders, CMS field editors, admin configuration tools, inspection checklists, SaaS workflow builders, and internal approval flows.
Getting it right requires careful thinking about schema design, dynamic rendering, state management, validation, and end-to-end product flow - which is exactly what this demo isolates.
Technical notes
The form schema is a plain JSON array of field definitions. The builder edits the schema, the preview renders from it, and submissions store both the raw values and a snapshot of the schema at submission time. There is no separate template for the preview - both views are driven by the same source of truth.
Option-based fields store stable IDs as canonical values, not display labels. Renaming an option after submissions exist does not corrupt earlier results.
Every visual property uses the Chameleon Engine's design token system, so the demo adapts automatically to every theme - try switching to Terminal or Retro.
What this proves
- Schema-driven UI where structure and rendering are fully separated
- Complex nested state: fields, options, validation rules, and a submission log
- A complete builder → preview → results product loop on a single page
- Stable data modeling that survives edits after submissions exist
- Responsive, accessible, and theme-aware without any hardcoded styles
- Production patterns for internal tools, admin panels, and dynamic product interfaces