Preview

Render the current JSON schema as an accessible, validated form.

JSON schema

Copyable form code

6 fields · 2 steps · 0 rules

{
  "id": "formcraft-demo",
  "name": "Untitled form",
  "title": "New customer intake",
  "description": "Collect the details your team needs to qualify and respond quickly.",
  "updatedAt": "2026-06-10T00:00:00.000Z",
  "theme": {
    "accentColor": "#2563eb",
    "radius": "rounded",
    "mode": "light",
    "fontFamily": "inter",
    "fontScale": "comfortable",
    "fieldStyle": "outline",
    "fieldRadius": 14,
    "fieldBorderWidth": 1,
    "focusStyle": "ring",
    "animation": "slide",
    "formWidth": "medium",
    "density": "comfortable",
    "buttonStyle": "filled",
    "buttonRadius": 14,
    "buttonWidth": "auto",
    "formPadding": "comfortable",
    "labelSpacing": "comfortable"
  },
  "fields": [
    {
      "id": "intro",
      "type": "section",
      "label": "Contact details",
      "helperText": "Step 1",
      "step": 1
    },
    {
      "id": "full_name",
      "type": "text",
      "label": "Full name",
      "placeholder": "Taylor Kim",
      "required": true,
      "step": 1
    },
    {
      "id": "work_email",
      "type": "email",
      "label": "Work email",
      "placeholder": "taylor@company.com",
      "required": true,
      "step": 1
    },
    {
      "id": "project_type",
      "type": "dropdown",
      "label": "Project type",
      "required": true,
      "options": [
        "Website",
        "Internal tool",
        "Mobile app"
      ],
      "step": 1
    },
    {
      "id": "line",
      "type": "divider",
      "label": "Divider",
      "step": 1
    },
    {
      "id": "scope",
      "type": "richtext",
      "label": "What are you trying to build?",
      "placeholder": "Describe the goal, timeline and constraints",
      "required": true,
      "step": 2
    }
  ]
}

This is the exact schema used by the live preview, including field layout, validation, theme, logic rules, and multi-step settings.