puckeditor/puck

The visual editor for React

Summary

Puck is an MIT-licensed, open-source visual editor for React that you embed as a component inside your own application. Instead of wiring up a hosted CMS, you register your existing React components in a config object, and Puck provides the drag-and-drop interface for arranging and configuring them. Pages are produced as JSON data that you persist yourself and render elsewhere with a separate Render component using the same config.

What it is useful for

Puck fits when a product team needs to give non-engineers a way to compose pages or screens from a fixed set of approved React components, without sending every change through a code review. Typical cases are marketing pages, internal tooling, and CMS-style editors where the building blocks (headings, cards, forms, embeds) are already React components in the codebase.

Because Puck is described as just a React component, it works in any React environment, with Next.js called out in the README. The data the editor produces is yours, so you can store it in your existing database or content store without vendor lock-in. The editor is modular, and the README points to an awesome-puck community repository for plugins and custom fields if the default field types are not enough.

A documented limitation to keep in mind: Puck only knows about the components you register in config. It is not a general-purpose builder for arbitrary HTML, and adding a new component type requires a code change and a redeploy.

How engineers can use it

Install the core package into a React project:

npm i @puckeditor/core --save

In your editor route, define a config that maps component names to fields and a render function, supply initial data, and pass an onPublish callback that persists the resulting JSON. The README's quick start shows a minimal HeadingBlock with a text field rendered as <h1>. To display the composed page elsewhere, render <Render config={config} data={data} /> with the same config and the stored data.

For a faster start, the README documents npx create-puck-app my-app, which scaffolds an app from a recipe. Two recipes are listed: next, a Next.js example using the App Router and static page generation, and react-router, a React Router v7 example using dynamic routes. For help beyond the docs, the README points to GitHub issues and a Discord channel.