What is React Editor?

React Editor is an open-source, visual editor for your react components. You can use React Editor to build custom drag-and-drop experiences for your application.

React Editor is a fork from Puck, which is the foundation for this project.

React Editor is licensed under MIT.

Quick start

Install the package:

npm i @reacteditor/core --save # or npx create-react-editor-app my-app

Render the editor:

// Editor.jsx
import { Editor } 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>;
      },
    },
  },
};

// Describe the initial data
const initialData = {};

// Save the data to your database
const save = (data) => {};

// Render React Editor
export function App() {
  return <Editor config={config} data={initialData} onPublish={save} />;
}

Render the page:

// Page.jsx
import { Render } from "@reacteditor/core";
import "@reacteditor/core/react-editor.css";

export function Page() {
  return <Render config={config} data={data} />;
}

Recipes

Use create-react-editor-app to quickly spin up a a pre-configured app based on our provided recipes:

npx create-react-editor-app my-app

Available recipes include:

• next: Next.js example, using App Router and static page generation
• react-router: React Router v7 app example, using dynamic routes to create pages at any level

Get support

If you have any questions about React Editor, please open a GitHub issue.

License

MIT License