Edit your pages
like a designer
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" }
]
}
}
]
}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
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.