Live demo

A config-driven form

On Qbench, a super admin configured a portal's columns, fields and form order, and the app rendered them with no code changes. On CCM, forms had fields that appeared based on other fields' values. This demo rebuilds that idea with synthetic data and my own design: the JSON on the left drives the form on the right. Edit the config, switch presets, and submit to see the collected values — nothing is sent anywhere.

Preset:

Config (JSON) — edit it and the form updates live

{
  "title": "Lab sample intake",
  "submitLabel": "Log sample",
  "fields": [
    {
      "name": "sampleId",
      "label": "Sample ID",
      "type": "text",
      "required": true,
      "minLength": 4,
      "placeholder": "e.g. SMP-2043"
    },
    {
      "name": "sampleType",
      "label": "Sample type",
      "type": "select",
      "required": true,
      "options": [
        {
          "value": "blood",
          "label": "Blood"
        },
        {
          "value": "water",
          "label": "Water"
        },
        {
          "value": "soil",
          "label": "Soil"
        },
        {
          "value": "food",
          "label": "Food"
        }
      ]
    },
    {
      "name": "collectedOn",
      "label": "Collected on",
      "type": "date",
      "required": true
    },
    {
      "name": "temperatureC",
      "label": "Storage temperature (°C)",
      "type": "number",
      "min": -80,
      "max": 40
    },
    {
      "name": "containers",
      "label": "Number of containers",
      "type": "number",
      "required": true,
      "min": 1,
      "max": 50
    },
    {
      "name": "priority",
      "label": "Priority",
      "type": "select",
      "required": true,
      "options": [
        {
          "value": "standard",
          "label": "Standard"
        },
        {
          "value": "rush",
          "label": "Rush"
        }
      ]
    },
    {
      "name": "rushReason",
      "label": "Reason for rush",
      "type": "textarea",
      "required": true,
      "maxLength": 200,
      "help": "Shown only when priority is Rush.",
      "visibleWhen": {
        "field": "priority",
        "equals": "rush"
      }
    },
    {
      "name": "hazardous",
      "label": "Hazardous material",
      "type": "checkbox"
    },
    {
      "name": "hazardClass",
      "label": "Hazard class",
      "type": "select",
      "required": true,
      "help": "Shown only when the sample is hazardous.",
      "visibleWhen": {
        "field": "hazardous",
        "equals": true
      },
      "options": [
        {
          "value": "flammable",
          "label": "Flammable"
        },
        {
          "value": "corrosive",
          "label": "Corrosive"
        },
        {
          "value": "toxic",
          "label": "Toxic"
        }
      ]
    }
  ]
}

Config is valid.

Lab sample intake

What the engine supports

Field types text, number, email, select, checkbox, date and textarea; required, min/max and length validation; field order straight from the config; and conditional fields — show or hide based on another field, including chains like country → state → city.

How it's built

A small, pure, typed module — a config schema plus helpers for visibility, validation and collecting values — with a thin React renderer on top. Read the study note for the full walkthrough.