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 app

Use <App> to mount a multi-page, schema-driven app. Each entry in pages is rendered through <Render>; the editor is mounted automatically at /editor/*.

App.jsx
import { App, outlinePlugin } from "@reacteditor/core";
import "@reacteditor/core/react-editor.css";
 
// Shared component config
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: { type: "text" },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};
 
// Editor side-panel plugins. blocksPlugin (Components) is auto-injected;
// outlinePlugin must be passed explicitly to enable the Outline panel.
const plugins = [outlinePlugin()];
 
// One Data payload per route
const pages = {
  "/": {
    content: [
      {
        type: "HeadingBlock",
        props: { id: "h-home", children: "Home" },
      },
    ],
    root: {},
  },
  "/about": {
    content: [
      {
        type: "HeadingBlock",
        props: { id: "h-about", children: "About" },
      },
    ],
    root: {},
  },
};
 
// Save the data to your database. `route` is the matched route key.
const save = (data, route) => {};
 
export default function MyApp() {
  return (
    <App config={config} pages={pages} plugins={plugins} onPublish={save} />
  );
}

This mounts:

  • / and /about rendered through <Render>.
  • /editor (for /) and /editor/about rendered through <Editor>.

Use react-router primitives (<Link>, useNavigate) for in-app navigation between pages — see Multi-Page Apps for the full guide.

Or generate a React Editor application using individual <Render> and <Editor> components.

Render the editor

Editor.jsx
import { Editor, outlinePlugin } from "@reacteditor/core";
import "@reacteditor/core/react-editor.css";
 
// 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()];
 
// Describe the initial data
const initialData = {};
 
// Save the data to your database
const save = (data) => {};
 
// Render React Editor editor
export function Editor() {
  return (
    <Editor
      config={config}
      data={initialData}
      plugins={plugins}
      onPublish={save}
    />
  );
}

Render the page

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