A lightweight, dependency-free form builder. Pick field types from the sidebar, arrange them on the canvas, customize each one, and export the result as a JSON schema.

No build step or server required — just open index.html in a browser.

open index.html        # macOS
start index.html        # Windows
xdg-open index.html     # Linux

• Sidebar palette — click Text Input, Checkbox, Dropdown, or Radio Button to drop a new field onto the canvas.
• Drag-and-drop reordering — drag any field card on the canvas to rearrange the form's field order.
• Inspector panel — click a field card to edit its label, placeholder (text fields), option list (dropdown/radio), and required rule.
• Live Preview tab — see the form rendered as an end user would see it, live as you edit.
• JSON Schema tab — view (and copy) the raw JSON schema describing the current form design.

index.html   — page structure / three views (Builder, Live Preview, JSON Schema)
style.css    — visual design (dark "workbench" theme, Space Grotesk + JetBrains Mono)
app.js       — state management, rendering, drag-and-drop, JSON export

{
  "formTitle": "Untitled Form",
  "fields": [
    {
      "id": "f_1a2b3c4",
      "type": "text",
      "label": "Full Name",
      "required": true,
      "placeholder": "Jane Doe"
    },
    {
      "id": "f_5d6e7f8",
      "type": "dropdown",
      "label": "Country",
      "required": false,
      "options": ["United States", "Germany", "Japan"]
    }
  ]
}

text fields include a placeholder key; dropdown and radio fields include an options array. checkbox fields carry just label and required.