Drag-and-drop Page Editor With React – Puck

Description:

Puck is an open-source source drag-and-drop editor for React that makes it easy to build pages and sites visually.

With puck, you can leverage your existing React components to create a customizable editor without vendor lock-in.  It also supports loading content from headless CMSs and includes inline editing capabilities.

Basic usage:

1. Install and import.

# NPM
$ npm i @measured/puck

// Import
import { Puck } from "@measured/puck";
// Configs
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};
// Initial data
const initialData = {};
// Save the data to your database
const save = (data) => {};
// Render Puck editor
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;
}

2. Render the page.

import { Render } from "@measured/puck";
export function Page() {
  return <Render config={config} data={data} />;
}

3. Available Puck props.

config: Config;
data: Data;
onChange?: (data: Data) => void;
onPublish: (data: Data) => void;
plugins?: Plugin[];
renderHeader?: (props: {
  children: ReactNode;
  data: Data;
  setData: (data: Data) => void;
}) => ReactElement;
renderHeaderActions?: (props: {
  data: Data;
  setData: (data: Data) => void;
}) => ReactElement;
headerTitle?: string;
headerPath?: string;

Preview: