Puck editor:
visual page editing for React
Puck is an open-source React visual editor. Decoupled.io pre-wires it to your Drupal components so editors compose pages without markup and without waiting on a deploy.
The components rendered in the preview are the same ones that ship to production.
Three ways Puck
changes page editing
Drag. Describe. Ship. No templates, no handoffs, no re-deploys.
Drag-and-drop sections
Hero, cards, testimonials, pricing tables — every component your site can render is a draggable block in the editor. Reorder with a drag, delete with a click, never touch a template string.
AI that speaks your schema
Ask for “a 3-column pricing table” or “a hero about shipping speed” and the AI fills in structured props your components already accept. No freeform HTML; every suggestion is a valid render.
Your components, your types
Puck reads the same React components your frontend ships. What an editor sees in the preview is byte-for-byte what production renders — no staging gap, no visual drift.
Structured JSON.
Typed components.
Puck doesn't generate HTML. Every edit is a change to a JSON tree where each node matches the props of a real React component. That means diffs are meaningful, AI output is always schema-valid, and content migrates cleanly between environments.
Real production components
The editor renders the same React components your Next.js or Astro frontend uses. No stand-ins, no mockups.
Schema-aware AI
The AI chat is told the exact prop shape of every component. Suggestions come back as valid data your components know how to render.
Version-controlled content
Puck data is JSON. Commit it, diff it, migrate it. Treat pages like code.
Ships with Decoupled.io
Every space ships with Puck pre-integrated to your Drupal paragraph types — no custom wiring.
{
"root": { "props": { "title": "Home" } },
"content": [
{
"type": "Hero",
"props": {
"eyebrow": "Ship faster",
"title": "Launch in minutes",
"layout": "centered",
"primaryCtaText": "Start building",
"primaryCtaUrl": "/signup"
}
},
{
"type": "Pricing",
"props": {
"title": "Simple pricing",
"tiers": [
{ "name": "Free", "price": "$0" },
{ "name": "Pro", "price": "$60" }
]
}
}
]
}How does the Puck editor work with a headless CMS?
A headless CMS stores content and serves it over an API; it does not render the site. Puck fills the editing gap: it gives non-developers a visual canvas for pages built from your React components. With Decoupled.io, Drupal stores the structured content, the Decoupled.io API (GraphQL and JSON:API) delivers it, and Puck is the authoring UI on top.
Puck editor vs other visual editors
| Option | Licence | Where content lives | Best when |
|---|---|---|---|
| Puck + Decoupled.io | Puck: MIT | Your Drupal space, as structured content | You own React components and want an open-source editor |
| Drupal Canvas | Open source (Drupal) | Your Drupal space | You want the Drupal-native builder; see Canvas |
| Hosted visual editors (e.g. Builder.io, Storyblok) | Proprietary | The vendor's cloud | You prefer a fully hosted editor and accept vendor lock-in |
Related reading: visual editor for headless CMS, visual editor docs, best headless CMS in 2026.
Try it in your browser.
No signup.
- 1
The page loads with a LaunchPad-style landing snapshot as its initial Puck state.
- 2
Edit anything — text, layouts, add or remove blocks. Changes live in memory.
- 3
Hit Publish and Puck saves to localStorage. No account, no backend, nothing leaves your browser.
- 4
Use the AI chat in the side panel to describe sections in plain English — the AI fills in structured Puck data.
- 5
“Reset demo” wipes your local edits and reloads the seed — no reload required.
Questions, answered
What is the Puck editor?
Puck is an open-source visual editor for React. Developers register their own React components with a field schema, and editors drag those components onto a page, edit their props, and publish. The page is stored as JSON, not HTML.
Is the Puck editor free?
Yes. Puck is MIT licensed, so you can use it in commercial projects at no cost. Decoupled.io's plans are separate and are listed on the pricing page; the Free plan includes one Drupal space.
Is there a WYSIWYG editor for React?
Yes, several. Puck is a page-level visual editor: it arranges whole components (hero, cards, pricing table) rather than formatting a text field. For rich text inside a field you would use a text editor component; Puck supports rich text fields as well as custom field types.
What is the best online React editor?
It depends on the job. For editing page layouts built from your own React components, Puck is purpose-built and open source. For writing formatted text, a rich-text editor library fits better. For hosted visual editing, platforms such as Builder.io and Storyblok are alternatives with their own pricing and trade-offs.
What are the alternatives to the Puck editor?
Hosted visual editors such as Builder.io and Storyblok, and Drupal Canvas, the page builder that also ships with Decoupled.io. Puck is the lighter option when you want an open-source editor that sits on top of React components you already own; see the Canvas page for the Drupal-native alternative.
Does Puck have plugins?
Puck exposes extension points such as plugins, custom fields and overrides in its editor API, so you can customize the editing interface. See the Puck documentation at puckeditor.com for the current list; the registry of components in a Decoupled.io project is the main way teams extend it.
How does Puck work as a headless CMS editor?
Puck handles the editing interface and Decoupled.io's Drupal backend stores the structured content and exposes it through GraphQL and JSON:API. Editors get drag-and-drop page building; your frontend (Next.js, Astro) renders the same React components in production.
Does my content live in Drupal or in Puck?
In Drupal. Puck is the authoring UI — structured content is stored on your Drupal backend as paragraphs and saved back through the Decoupled.io API. The demo on this page is the exception: it writes to your browser’s localStorage so you can try it without an account.
Can I use my own React components?
Yes. Puck reads a plain component registry — export a React component, add it to the registry with a Puck field schema, and it’s immediately available as a draggable block. The components that ship with Decoupled.io are the same ones rendered in the demo above.
What powers the AI chat?
The demo uses a fast open-source LLM behind the scenes — typical suggestions come back in under two seconds. In a real Decoupled.io project you can swap in any provider that returns structured JSON (OpenAI, Anthropic, a self-hosted model). The component schema is part of the prompt, so suggestions are always valid props for components you actually ship.
Is Puck open source?
Yes — MIT licensed at github.com/measuredco/puck. We contribute patches back when we fix things downstream.
What happens when I hit Publish in the demo?
Your Puck state serializes to JSON and writes to localStorage under the key decoupled-puck-demo:v1. Reload the page — your edits persist. Click “Reset demo” to clear localStorage and restore the original seed.
Does the demo use my data?
No. The demo is browser-only; nothing from it is sent to our servers. The one exception: AI prompts are proxied through a serverless function to the LLM provider, which sees the prompt and the current Puck state for that single request.
See it for yourself.
Open the demo, drag a section, ask the AI for something — everything runs in your browser.