# Puck — The Visual Editor for React

> An open-source visual editor for React that enables drag-and-drop page building with your own components, supporting React Server Components and producing clean, serializable output.

## Install

Save as a script file and run:

# Puck — The Visual Editor for React

## Quick Use
```bash
npm install @measured/puck
```

```jsx
import { Puck, Render } from '@measured/puck';
import '@measured/puck/puck.css';

const config = {
  components: {
    Heading: {
      fields: { text: { type: 'text' } },
      render: ({ text }) => <h1>{text}</h1>,
    },
  },
};

// Editor mode
<Puck config={config} data={{}} onPublish={(data) => save(data)} />

// Render mode
<Render config={config} data={savedData} />
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-5269d467
Author: Script Depot