Developer JSON

Overview

Every form in DynamicFormBuilder is stored as a JSON array of field definition objects. The visual builder is a graphical editor for this data structure. Developer JSON mode exposes the raw schema in a full-screen code editor with syntax highlighting, auto-formatting, and real-time validation feedback.

This mode is invaluable for: programmatically generating forms from existing data models, bulk-copying field configurations between forms, fine-tuning properties not exposed in the visual UI, and integrating form definitions with version control systems.

Schema Structure

The top-level form schema is a JSON object with two main properties:

{
  "meta": {
    "name": "Customer Feedback",
    "description": "Q4 2024 satisfaction survey",
    "defaultLanguage": "en",
    "languages": ["en", "ne"],
    "multiStep": true
  },
  "fields": [
    {
      "type": "text",
      "label": "Full Name",
      "name": "full_name",
      "required": true
    },
    {
      "type": "step-section",
      "name": "step_2",
      "title": "Feedback"
    },
    {
      "type": "rating",
      "label": "Overall Rating",
      "name": "overall_rating",
      "required": true,
      "maxRating": 5
    }
  ]
}

Importing JSON

You can import a JSON schema from an external file using the Import JSON button in the Developer JSON editor toolbar. The schema will be validated before being applied. You can also paste JSON directly into the editor.

Schema Validation

The Developer JSON editor validates your schema in real time against the field type definitions. Errors are highlighted inline with descriptive messages. Common validation errors include:

• Missing required properties (type, label, name)
• Duplicate field name values (names must be unique within a form)
• Invalid field type strings
• Incorrectly typed property values (e.g. string where number expected)