<Editor>

Render the React Editor editor.

import { Editor, outlinePlugin } from "@reacteditor/core";
 
const config = {
  components: {},
};
 
const initialData = {
  content: [],
  root: {},
};
 
// blocksPlugin is auto-injected; outlinePlugin must be passed explicitly
// to enable the Outline panel.
const plugins = [outlinePlugin()];
 
export function Editor() {
  return <Editor config={config} data={initialData} plugins={plugins} />;
}

Props

Param	Example	Type	Status
`config`	`config: { components: {} }`	Config	Required
`data`	`data: {}`	Data	Required
`dnd`	`dnd: {}`	DndConfig	-
`children`	`children: <Editor.Preview />`	ReactNode	-
`color`	`color: "teal"`	ColorPalette	-
`fieldTransforms`	`fieldTransforms: {text: () => <div />}`	FieldTransforms	-
`height`	`height: "100%"`	String \| Number	-
`iframe`	`iframe: {}`	IframeConfig	-
`initialHistory`	`initialHistory: {}`	InitialHistory	-
`metadata`	`metadata: {}`	Object	-
`onAction()`	`onAction: (action, appState, prevAppState) => {}`	Function	-
`onChange()`	`onChange: (data) => {}`	Function	-
`onPublish()`	`onPublish: async (data) => {}`	Function	-
`overrides`	`overrides: { header: () => <div /> }`	Overrides	Experimental
`permissions`	`permissions: {}`	Permissions[]	-
`plugins`	`plugins: [myPlugin]`	Plugin[]	Experimental
`theme`	`theme: "dark"`	`"light" \| "dark"`	-
`themeConfig`	`themeConfig: defineConfig({})`	SystemConfig	-
`ui`	`ui: {leftSideBarVisible: false}`	AppState.ui	-
`viewports`	`viewports: [{ width: 1440 }]`	Viewport[]	-
`disableZoomControls`	`disableZoomControls: true`	Boolean	-
`fullScreenCanvas`	`fullScreenCanvas: true`	Boolean	-

Required props

`config`

An object describing the available components, fields and more. See the Config docs for a full reference.

export function Editor() {
  return (
    <Editor
      config={{
        components: {
          HeadingBlock: {
            fields: {
              children: {
                type: "text",
              },
            },
            render: ({ children }) => {
              return <h1>{children}</h1>;
            },
          },
        },
      }}
      // ...
    />
  );
}

`data`

The complete page data to render, including globals when used. It cannot be changed once <Editor> has been mounted. Mount a separate Editor instance for another page. See the Data docs for a full reference.

export function Editor() {
  return (
    <Editor
      data={{
        content: [
          {
            props: { children: "Hello, world", id: "id" },
            type: "HeadingBlock",
          },
        ],
        root: {},
      }}
      // ...
    />
  );
}

Optional props

`children`

Render custom nodes to create compositional interfaces.

export function Editor() {
  return (
    <Editor /*...*/>
      <Editor.Preview />
    </Editor>
  );
}

`color`

Set the Chakra color palette for the editor chrome. It defaults to blue and is scoped to this Editor instance.

<Editor color="teal" config={config} data={data} />

`theme`

Set the light or dark appearance of the editor chrome. Change the prop to update the appearance; the editor does not render an appearance toggle.

<Editor theme="dark" color="teal" config={config} data={data} />

For backwards compatibility, theme={defineConfig(...)} remains supported; new theme-system overrides should use themeConfig.

`themeConfig`

Deep-merge a Chakra defineConfig object over the editor’s base system.

import { defineConfig } from "@chakra-ui/react";
 
const themeConfig = defineConfig({
  theme: {
    tokens: {
      fonts: {
        body: { value: "Inter, sans-serif" },
      },
    },
  },
});
 
<Editor
  theme="dark"
  color="teal"
  themeConfig={themeConfig}
  config={config}
  data={data}
/>;

`dnd`

Configure drag-and-drop behavior.

dnd params

Param	Example	Type	Status
`disableAutoScroll`	`disableAutoScroll: true`	boolean	-

`disableAutoScroll`

Disable auto-scroll when the user drags an item near the edge of the preview area.

`fieldTransforms`

Specify transforms to modify field values before being passed to the editor canvas. Implements the Field Transforms API.

export function Editor() {
  return (
    <Editor
      fieldTransforms={{
        text: ({ value }) => <div>{value}</div>, // Wrap all text field values in a div
      }}
      // ...
    />
  );
}

`height`

Modify the height of the React Editor editor when using the standard layout. Defaults to 100dvh.

export function Editor() {
  return (
    <Editor
      height="100%"
      // ...
    />
  );
}

`disableZoomControls`

Hide the zoom controls in the floating canvas toolbar and render the canvas at its natural scale.

<Editor disableZoomControls config={config} data={data} />

`fullScreenCanvas`

Enable the canvas-focused selection behavior used by full-screen editor integrations.

<Editor fullScreenCanvas config={config} data={data} />

`iframe`

Configure the iframe behaviour.

export function Editor() {
  return (
    <Editor
      iframe={{ enabled: false }}
      // ...
    />
  );
}

iframe params

Param	Example	Type	Status
`enabled`	`enabled: false`	boolean	-
`waitForStyles`	`waitForStyles: false`	boolean	-

`enabled`

Render the React Editor preview within iframe. Defaults to true.

Disabling iframes will also disable viewports.

`waitForStyles`

Defer rendering of the React Editor preview until the iframe styles have loaded, showing a spinner. Defaults to true.

`initialHistory`

Sets the undo/redo React Editor history state when using the useEditor history API.

const historyState = {
  data: {
    root: {
      props: { title: "My History" },
    },
  },
};
 
export function Editor() {
  return (
    <Editor
      initialHistory={{
        histories: [{ state: historyState }],
        index: 0,
      }}
      // ...
    />
  );
}

`initialHistory` params

Param	Example	Type	Status
`histories`	`histories: []`	History[]	Required
`index`	`index: 2`	Number	Required
`appendData`	`appendData: false`	Boolean	-

`histories`

An array of histories to reset the React Editor state history state to.

`index`

The index of the histories to set the user to.

`appendData`

Append the React Editor data prop onto the end of histories. Defaults to true.

When false, the React Editor data prop will be ignored but you must specify at least one item in the histories array.

`onAction(action, appState, prevAppState)`

Callback that triggers when React Editor dispatches an action, like insert or set. Use this to track changes, perform side effects, or sync with external systems.

Receives three arguments:

action: The action that was dispatched
appState: The new AppState after the action was applied
prevAppState: The previous AppState before the action was applied

export function Editor() {
  return (
    <Editor
      onAction={(action, appState, prevAppState) => {
        if (action.type === "insert") {
          console.log("New component was inserted", appState);
        }
      }}
      // ...
    />
  );
}

`metadata`

An object containing additional data provided to each component’s render and resolveData functions.

export function Editor() {
  return (
    <Editor
      metadata={{ title: "Hello, world" }}
      config={{
        HeadingBlock: {
          render: ({ editor }) => {
            return <h1>{editor.metadata.title}</h1>; // "Hello, world"
          },
        },
      }}
      // ...
    />
  );
}

`onChange(data)`

Callback that triggers when the user makes a change.

Receives one self-contained Data argument, including its globals map when the page uses shared values.

export function Editor() {
  return (
    <Editor
      onChange={(data) => {
        console.log("React Editor data was updated", data);
      }}
      // ...
    />
  );
}

`onPublish(data)`

Callback that triggers when the user hits the “Save” button. Use this to save the React Editor data to your database.

Receives a single Data arg.

export function Editor() {
  return (
    <Editor
      onPublish={async (data) => {
        await fetch("/my-api", {
          method: "post",
          body: JSON.stringify({ data }),
        });
      }}
      // ...
    />
  );
}

`overrides`

An Overrides object defining custom render methods for various parts of the React Editor UI.

export function Editor() {
  return (
    <Editor
      overrides={{
        header: () => <div />,
      }}
      // ...
    />
  );
}

`permissions`

Set the global permissions for the React Editor instance to toggle React Editor functionality.

export function Editor() {
  return (
    <Editor
      permissions={{
        delete: false, // Prevent deletion of all components
      }}
      // ...
    />
  );
}

`plugins`

An array of plugins to enhance React Editor’s behaviour. See the Plugin API reference.

The blocksPlugin (Components panel) is auto-injected by the editor shell. The outlinePlugin (Outline panel) is not — pass it in the array to enable that panel. The fields panel is also auto-added unless you supply a plugin named "fields".

import { Editor, outlinePlugin } from "@reacteditor/core";
import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
 
const tailwindCdn = createTailwindCdnPlugin();
 
const plugins = [outlinePlugin(), tailwindCdn];
 
export function Editor() {
  return (
    <Editor
      plugins={plugins}
      // ...
    />
  );
}

`ui`

Set the initial application UI state and choose which static editor controls are rendered. Runtime state is described by AppState.ui. Static control flags are read when the Editor mounts.

export function Editor() {
  return (
    <Editor
      // Hide the left side bar by default
      ui={{ leftSideBarVisible: false }}
      // ...
    />
  );
}

<Editor
  config={config}
  data={data}
  ui={{
    showNavBar: false,
    showHistoryControls: false,
    showDeviceToggle: false,
    showFullScreenToggle: false,
    showToolbar: false,
  }}
/>

`viewports`

Configure the viewports available to the user, rendered as an iframe. React Editor will select the most appropriate initial viewport based on the user’s window size, unless otherwise specified via the ui prop.

export function Editor() {
  return (
    <Editor
      viewports={[
        {
          width: 1440,
        },
      ]}
      // ...
    />
  );
}

Viewport params

Param	Example	Type	Status
`width`	`width: 1440`	number \| `"100%"`	Required
`height`	`height: 968`	number \| `"auto"`	-
`icon`	`icon: "Monitor"`	`"Smartphone"` \| `"Tablet"` \| `"Monitor"` \| ReactNode	-
`label`	`label: "iPhone"`	string	-

`width`

The width of the viewport.

`height`

An optional height for the viewport. Defaults to auto, which will fit to the window.

`label`

An optional label for the viewport. This is used for browser tooltip.

`icon`

The icon to show in the viewport switcher. Can be:

"Smartphone"
"Tablet"
"Monitor"
ReactNode

React Editor uses Lucide icons. You can use lucide-react to choose a similar icon, if desired.

Default viewports

By default, React Editor exposes small, medium and large viewports based on common viewport sizes.

[
  {
    "width": 360,
    "height": "auto",
    "icon": "Smartphone",
    "label": "Small"
  },
  {
    "width": 768,
    "height": "auto",
    "icon": "Tablet",
    "label": "Medium"
  },
  {
    "width": 1280,
    "height": "auto",
    "icon": "Monitor",
    "label": "Large"
  },
  {
    "width": "100%",
    "height": "auto",
    "icon": "FullWidth",
    "label": "Full-width"
  }
]

<Editor>

Props

Required props

config

data

Optional props

children

color

theme

themeConfig

dnd

dnd params

disableAutoScroll

fieldTransforms

height

disableZoomControls

fullScreenCanvas

iframe

iframe params

enabled

waitForStyles

initialHistory

initialHistory params

histories

index

appendData

onAction(action, appState, prevAppState)

metadata

onChange(data)

onPublish(data)

overrides

permissions

plugins

ui

viewports

Viewport params

width

height

label

icon

Default viewports

`config`

`data`

`children`

`color`

`theme`

`themeConfig`

`dnd`

`disableAutoScroll`

`fieldTransforms`

`height`

`disableZoomControls`

`fullScreenCanvas`

`iframe`

`enabled`

`waitForStyles`

`initialHistory`

`initialHistory` params

`histories`

`index`

`appendData`

`onAction(action, appState, prevAppState)`

`metadata`

`onChange(data)`

`onPublish(data)`

`overrides`

`permissions`

`plugins`

`ui`

`viewports`

`width`

`height`

`label`

`icon`