DocsGetting Started

Getting Started

Installation

Install the package

npm i @reacteditor/core --save

Or scaffold a new app with create-react-editor-app, which generates a preconfigured project from a recipe — Next.js or React Router.

npx create-react-editor-app my-app

You’ll be prompted to pick a recipe; the generator installs dependencies and initializes a git repo.

Render the editor

Editor.jsx
import { Editor, outlinePlugin } from "@reacteditor/core";
 
// Create React Editor component config
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};
 
// Side-panel plugins. blocksPlugin is auto-injected; outlinePlugin must
// be passed explicitly to enable the Outline panel.
const plugins = [outlinePlugin()];
 
// One self-contained page payload. Shared values, when used, live in globals.
const initialData = {
  root: { props: {} },
  content: [],
  globals: {},
};
 
// Save the data to your database
const save = (data) => {};
 
// Render React Editor editor
export function PageEditor() {
  return (
    <Editor
      config={config}
      data={initialData}
      plugins={plugins}
      onPublish={save}
    />
  );
}

Each <Editor> instance edits one page payload. URL matching and navigation belong to your application: load the page’s data in your framework route and mount a separate Editor instance when the page changes.

Render the page

Page.jsx
import { Render } from "@reacteditor/core";
 
export function Page() {
  return <Render config={config} data={data} />;
}

<Render> follows the same model: pass the complete payload for the page, including globals when it uses shared values.

IntroductionComponent Configuration