`Data`

An object produced by React Editor describing the shape of content.

{
  "content": [
    {
      "type": "HeadingBlock",
      "props": {
        "id": "HeadingBlock-1234",
        "title": "Hello, world"
      }
    }
  ],
  "root": { "props": {}, "synced": true },
  "globals": {
    "root": { "props": { "title": "React Editor Example" } }
  },
  "zones": {}
}

Each <Editor> or <Render> receives one complete page payload. Shared values are stored in that payload’s globals map; React Editor does not load or switch between pages.

Params

Param	Example	Type	Status
`content`	`content: []`	ComponentData[]	Required
`root`	`root: { props: { title: "My page" } }`	RootData	Required
`globals`	`globals: { root: { props: {} } }`	Object	-
`zones`	`zones: { "HeadingBlock-123:zone": [] }`	Object	-

`content`

An array of ComponentData objects representing the component instances in the default content region.

{
  "content": [
    {
      "type": "HeadingBlock",
      "props": {
        "id": "HeadingBlock-1234",
        "title": "Hello, world"
      }
    }
  ],
  "root": {},
  "zones": {}
}

`root`

An object describing data for the root config. An instance of RootData.

{
  "content": [],
  "root": {
    "props": {
      "title": "My page"
    },
    "synced": false
  },
  "zones": {}
}

`globals`

An object containing shared props used by synced roots and components. The root entry supplies shared root props. A component entry uses the component type as its key and requires that component’s global config to be enabled.

{
  "content": [
    {
      "type": "SiteHeader",
      "props": { "id": "SiteHeader-1234" },
      "synced": true
    }
  ],
  "root": { "props": {}, "synced": true },
  "globals": {
    "root": { "props": { "theme": "dark" } },
    "SiteHeader": { "props": { "logoText": "Acme" } }
  }
}

Synced instance props are resolved from this map for editing and rendering. onChange and onPublish emit the same self-contained shape, with shared props kept in globals instead of duplicated across instances.

`zones`

💡

This parameter will soon be deprecated, as DropZones have been replaced by slot fields.

An object describing nested content regions for each DropZone.

`zones[zoneKey]`

An array of ComponentData objects representing the components instances in a particular DropZone.

zoneKey is a compound of the component id and DropZone zone.

{
  "content": [],
  "root": {},
  "zones": {
    "HeadingBlock-1234:my-content": [
      {
        "type": "HeadingBlock",
        "props": {
          "id": "HeadingBlock-1234",
          "title": "Hello, world"
        }
      }
    ]
  }
}

ComponentData ItemSelector