The visual editor for React

Documentation • Demo • Discord • Contributing

⭐️ Enjoying Puck? Please leave a star!

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.

Install the package:

npm i @measured/puck --save # or npx create-puck-app my-app

Render the editor:

// Editor.jsx
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:

// Page.jsx
import { Render } from "@measured/puck";
import "@measured/puck/puck.css";

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

Puck renders any React component, so you can wrap Ant Design, Chakra UI, or your internal design system without rewriting widgets. See the design systems guide for a complete example.

Need code that mirrors what you built in the editor? Use the new generateComponent and generateJSX helpers to emit JSX and import statements for your preferred component library—similar to code-focused tools such as ui-builder. The code generation guide covers the end-to-end workflow.

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

npx create-puck-app my-app

Available recipes include:

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

• Discord server for discussions
• awesome-puck community repo for plugins, custom fields & more

If you have any questions about Puck, please open a GitHub issue or join us on Discord.

Or book a discovery call for hands-on support and consultancy.

MIT © The Puck Contributors