Puck, a visual editor for React.

In this article, we review what Puck is. We will look at:

1. What is Puck?

2. Features

3. Quick start

What is Puck?

Puck is a modular, open-source visual editor for React.js. You can use Puck to build custom drag-and-drop experiences with your own application and React components.

Because Puck is just a React component, it plays well with all React.js environments, including Next.js. You own your data and there’s no vendor lock-in.

Puck is also licensed under MIT, making it suitable for both internal systems and commercial applications.

How exactly does this visual editor look like?

Below screenshot is from the demo.

You can drag and drop components from the left sidebar onto canvas to build a web page.

Features

• Component Configuration — Integrate your own components with Puck by providing render functions and configuring fields that map to your props.

• Root Configuration — Customize the root component that wraps all other Puck components.

• Multi-column Layouts — Create multi-column layouts using nested components. Now supports advanced CSS layouts.

• Categories — Group your components in the side bar.

• Dynamic Props — Dynamically set props after user input and mark fields as read-only

• Dynamic Fields — Dynamically set fields based on user inputExternal

• Data Sources — Load content from a third-party CMS or other data source

• Server Components — Opt-in support for React Server Components

• Data Migration — Migrate between breaking Puck releases and your own breaking prop changes

• Viewports — Preview and edit your content in a same-origin iframe to simulate different viewports

• Feature Toggling — Toggle Puck features, like duplication or deletion, via the permissions API.

Quick start

Installation

npm i @measured/puck --save

Render the editor

import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// Create Puck 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 Puck editor
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;
}

Render the page

import { Render } from "@measured/puck";

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

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

1. https://github.com/puckeditor/puck

2. https://puckeditor.com/