Playground

Edit the JSON and the form updates as you type. Fill it in and submit to see exactly what your backend would receive.

FormDefinition (JSON)

{
  "id": "contact",
  "name": "Contact form",
  "schemaVersion": 1,
  "createdAt": "2026-01-01T00:00:00.000Z",
  "updatedAt": "2026-01-01T00:00:00.000Z",
  "fields": [
    {
      "id": "first_name",
      "type": "text",
      "label": "First name",
      "required": true,
      "defaultProps": {
        "placeholder": "Ada"
      }
    },
    {
      "id": "last_name",
      "type": "text",
      "label": "Last name",
      "defaultProps": {
        "placeholder": "Lovelace"
      }
    },
    {
      "id": "email",
      "type": "email",
      "label": "Email",
      "required": true,
      "description": "We only use this to reply."
    },
    {
      "id": "topic",
      "type": "select",
      "label": "Topic",
      "defaultProps": {
        "placeholder": "Choose a topic",
        "options": [
          "Question",
          "Feedback",
          "Bug report"
        ]
      }
    },
    {
      "id": "message",
      "type": "textarea",
      "label": "Message",
      "required": true,
      "validation": {
        "minLength": 10,
        "maxLength": 500
      },
      "defaultProps": {
        "rows": 4
      }
    },
    {
      "id": "subscribe",
      "type": "checkbox",
      "label": "Send me product updates"
    }
  ],
  "layout": {
    "rows": [
      {
        "id": "row_name",
        "columns": [
          {
            "span": 6,
            "fieldId": "first_name"
          },
          {
            "span": 6,
            "fieldId": "last_name"
          }
        ]
      },
      {
        "id": "row_email",
        "columns": [
          {
            "span": 12,
            "fieldId": "email"
          }
        ]
      },
      {
        "id": "row_topic",
        "columns": [
          {
            "span": 12,
            "fieldId": "topic"
          }
        ]
      },
      {
        "id": "row_message",
        "columns": [
          {
            "span": 12,
            "fieldId": "message"
          }
        ]
      },
      {
        "id": "row_subscribe",
        "columns": [
          {
            "span": 12,
            "fieldId": "subscribe"
          }
        ]
      }
    ]
  },
  "theme": {},
  "logic": {
    "visibility": [],
    "calculated": []
  }
}

Playground

FormDefinition (JSON)

Live preview