Puck — The Visual Editor for React

Introduction

Puck is a visual page editor for React that lets content editors build pages using drag-and-drop with your own components. It produces a JSON data structure that can be rendered with the same components, keeping editing and rendering in sync without any content API dependency.

What Puck Does

• Provides a drag-and-drop page editor powered by your React component library
• Produces a clean JSON data structure that represents the page layout and content
• Renders pages from saved data using the same component definitions as the editor
• Supports React Server Components for optimized server-side rendering
• Allows custom fields, plugins, and overrides for extending the editor interface

Architecture Overview

Puck consists of two main exports: the Puck editor component and the Render component. The editor maintains a data object describing the page structure as a tree of component references with props. When a user drags a component onto the canvas, Puck updates this data tree. The Render component takes the same config and data to produce the final output. Both share the same component resolver, ensuring visual parity between editing and rendering.

Self-Hosting & Configuration

• Install @measured/puck and import the CSS file for the default editor styles
• Define your components in a config object with fields, default props, and render functions
• Mount the Puck component for editor mode with an onPublish callback to save the data
• Use the Render component for production rendering from saved JSON data
• Customize the editor UI with overrides for the header, sidebar, and field types

Key Features

• Server Components: first-class support for React Server Components and Next.js App Router
• Inline editing: click-to-edit text directly on the canvas without switching to a side panel
• DropZones: define nestable content areas within components for flexible layouts
• Plugin system: extend the editor with custom field types, actions, and UI overrides
• Zero vendor lock-in: data is plain JSON, components are your own React code

Comparison with Similar Tools

• Craft.js — lower-level framework for building editors; Puck is a ready-to-use editor with a polished UI
• Builder.io — SaaS visual editor with an open SDK; Puck is fully self-contained with no external service
• GrapesJS — framework-agnostic HTML editor; Puck is React-native and uses real React components
• Plasmic — visual builder with code generation; Puck produces JSON data rendered by your components
• Storyblok — headless CMS with a visual editor; Puck is an open-source editor without CMS infrastructure

FAQ

Q: Does Puck work with Next.js App Router? A: Yes. Puck supports React Server Components and works with Next.js App Router out of the box. You can render pages on the server using the Render component.

Q: How is the page data stored? A: Puck produces a JSON object. You store it however you like — in a database, a file, or a CMS. There is no built-in persistence layer, which keeps the tool flexible.

Q: Can I use Puck with existing component libraries? A: Yes. Register your existing components in the Puck config object with field definitions. The editor renders your actual components on the canvas.

Q: Is Puck suitable for production use? A: Puck is actively maintained and used in production by teams building page builders and content management tools. The API is stable with semantic versioning.

Sources

• https://github.com/measuredco/puck
• https://puckeditor.com/docs