JSON Editor

Minimal Example

{
  "id": "config",
  "type": "json-editor",
  "label": "Configuration",
  "width": "full",
  "binding": {
    "source": "$json",
    "path": "node.config"
  }
}

Settings Reference

Stored Value Format

The JSON editor stores and returns a parsed JavaScript object/array — not a JSON string. When the editor content is invalid JSON, the field value is null and a parse error is shown:

// User types valid JSON: { "key": "value" }
// Stored value: { key: "value" }  ← JS object

// User types invalid JSON: { key: value }
// Stored value: null
// Error shown: "Invalid JSON: Unexpected token 'v'"

JSON Schema Validation

Provide a JSON Schema (draft-07) in settings.schema to validate the structure of the entered JSON beyond parse correctness:

{
  "id": "webhook-config",
  "type": "json-editor",
  "label": "Webhook Configuration",
  "width": "full",
  "settings": {
    "height": "250px",
    "schema": {
      "type": "object",
      "required": ["url", "events"],
      "properties": {
        "url": {
          "type": "string",
          "format": "uri",
          "description": "The webhook endpoint URL"
        },
        "events": {
          "type": "array",
          "items": { "type": "string" },
          "minItems": 1,
          "description": "List of event names to subscribe to"
        },
        "secret": {
          "type": "string",
          "description": "Optional HMAC signing secret"
        }
      },
      "additionalProperties": false
    }
  },
  "defaultValue": {
    "url": "https://",
    "events": ["form.submitted"]
  }
}

Auto-Height Mode

For forms where JSON content length varies greatly, use auto-height with bounds:

{
  "id": "metadata",
  "type": "json-editor",
  "label": "Metadata",
  "settings": {
    "height": "auto",
    "minHeight": "150px",
    "maxHeight": "600px",
    "formatOnLoad": true
  }
}

Read-Only Display

In view and preview modes, the JSON editor renders as a read-only syntax-highlighted code block. You can also force read-only in edit mode for display-only JSON fields:

{
  "id": "response-preview",
  "type": "json-editor",
  "label": "API Response",
  "settings": {
    "readOnly": true,
    "height": "200px",
    "lineNumbers": false,
    "foldGutter": true
  },
  "modeVisibilitySettings": {
    "edit": true,
    "view": true,
    "admin": true,
    "preview": false,
    "design": false
  }
}

Default Value

Provide a defaultValue as a JavaScript object (not a JSON string). Atlas Forms will pretty-print it when the editor initialises:

{
  "id": "node-settings",
  "type": "json-editor",
  "label": "Node Settings",
  "defaultValue": {
    "retryCount": 3,
    "timeoutMs": 5000,
    "headers": {}
  }
}

Common Use Cases