Theming

React Editor’s chrome uses a scoped Chakra UI system. Appearance, color palette, and custom tokens apply only to that Editor instance and do not theme the page rendered in the preview iframe.

Appearance and color

Use theme for the light or dark appearance and color for the active Chakra palette. The editor does not render an appearance toggle.

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

color defaults to blue. Change either prop to update that Editor instance.

Chakra configuration

Pass a Chakra defineConfig object through themeConfig. It is deep-merged over React Editor’s base configuration.

import { defineConfig } from "@chakra-ui/react";
 
const editorTheme = defineConfig({
  theme: {
    tokens: {
      fonts: {
        body: { value: "Arial, sans-serif" },
        heading: { value: "Arial, sans-serif" },
      },
      radii: {
        md: { value: "4px" },
      },
    },
  },
});
 
export function PageEditor() {
  return <Editor themeConfig={editorTheme} config={config} data={data} />;
}

Define the config outside the component, or memoize it, so its identity remains stable between renders. See the Editor theming props for more examples.