Puck
Embeddable visual editor for React that turns your components into a drag-and-drop page builder, with AI generation constrained to your own brand and
Puck gets the architecture right in a way few embedded editors do: your components, your rules, JSON on your backend, MIT-licensed core. Puck AI's constraint to your existing components is the detail that matters, because it stops the agent from inventing UI you cannot ship — and design mode (added in Puck AI 0.8, July 2026) now lets it create new components within guardrails you define. It is a poor fit if you want a site builder you can operate on day one without writing component definitions, and it is React-only. If you want hosted no-code instead, look at Framer or Webflow; if your team writes React and wants an agent inside the product, Puck is the closer match.
Verified 11d ago · liveness 68/100 · cite: rightaichoice.com/tools/puck
- React teams with an existing component library that need embedded visual editing
- Design system teams letting non-technical contributors build brand-safe pages
- Product teams shipping customer-configurable or white-label interfaces
- Enterprises needing private models, on-prem deployment, and training opt-out
- Non-React stacks — Puck requires a React environment
- Teams wanting a turnkey CMS with no component or field setup
- Anyone expecting plug-and-play integrations — you wire up your own backend APIs
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Puck if your team doesn't write React or you want a hosted page builder you can operate on day one without defining components, fields, and a root configuration first.
Running the AI agent through Puck on Pay-as-you-go adds a 20% platform fee on top of the model provider's list price, which compounds quickly on high-volume generation.
Puck Cloud Pay-as-you-go fits solo devs and AI prototypes on metered token cost plus 20%; Launch at $199/mo billed monthly is the realistic floor for production use, and Growth at $799/mo billed monthly adds priority support, an SLA, GitHub issue prioritization, and a dedicated Slack channel. Both are mid-market pricing compared with a self-hosted MIT core you can run for free, and cheaper than standing up a bespoke editor team — but pricier than a hosted site builder for teams with no React
In short
Puck — Embeddable visual editor for React that turns your components into a drag-and-drop page builder, with AI generation constrained to your own brand and. Best for React teams with an existing component library that need embedded visual editing, Design system teams letting non-technical contributors build brand-safe pages, Product teams shipping customer-configurable or white-label interfaces. Free to start; paid plans from $199/mo.
What's new in Puck
Checked 3 days agoAcross the latest 4 updates: 1 feature update, 1 launch and 2 changelog entries.
Upgrading to Puck 0.23
Upgrade guide for moving an existing app to Puck 0.23.
Puck 0.23: Drag-and-drop improvements and localization
Puck 0.23 reduces layout shift in drag-and-drop and adds a Dictionary API for translating the editor UI.
Puck AI 0.8: Next-gen agent, design mode & BYOK
Puck AI 0.8 adds a next-gen agent, bring-your-own-key support, and design mode for creating components on the fly.
Introducing Puck AI
Puck AI launched: a visual AI builder that generates production interfaces inside your own application.
What people actually say about Puck — is it worth it?
We scanned public community sources for Puck on Sep 23, 2026 and could not establish that the discussion we found is about this tool rather than something else sharing its name. Only 3 of the posts we fetched could be positively tied to Puck. Rather than publish a sentiment score built on the wrong subject, we publish nothing here and re-run the scan.
Viability Score
How well maintained and how widely used is Puck? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: October 2026
How we score →Key Features
- Embeddable WYSIWYG drag-and-drop page builder for React apps
- Build pages from your own React components as editing blocks
- AI copilot inside the editor for in-app page generation
- Headless AI page generation via API for programmatic workflows
- Design mode to generate new components within defined guardrails
- Bring your own key (BYOK) to route AI requests through your provider
- Multi-column layouts with nested components and advanced CSS layouts
- Dynamic props and dynamic fields driven by user input
- External data sources including third-party CMS and backend APIs
- React Server Components opt-in support
- Store and serve all page output as JSON on your own backend
- Feature toggling via the permissions API
- Plugin API for custom fields and UI overrides
- Root configuration to customize the wrapper component
- Rich text editing
About Puck
Puck is a modular visual editor you embed directly inside a React app. You register your own components and fields, and Puck renders a drag-and-drop editing surface on top of them, so non-technical contributors can build pages without leaving your product or escaping your design system. Everything the editor produces is stored as JSON on your own backend, so there's no vendor lock-in and no separate CMS to sync. The core editor is MIT-licensed (13.4k GitHub stars, ~1,023,000 monthly downloads) and works in any React environment including Next.js. On top of the editor sits Puck AI, launched July 2026 as a visual AI builder that generates interfaces from prompts but constrains output to your existing components and rules. Puck AI 0.8 (July 28, 2026) added a next-gen agent, design mode for creating new components on the fly, and bring-your-own-key so you control model costs. Headless generation via API lets you wire Puck into your own agents and automated publishing workflows. The editor itself covers multi-column and nested layouts, dynamic props and fields, rich text, external data sources, React Server Components, a permissions API for feature toggling, and a plugin API for custom fields and UI overrides. Puck 0.22 (June 25, 2026) brought CSS custom property theming, automatic CSS loading, and host style sync controls; Puck 0.23 (August 7, 2026) reduced drag-and-drop layout shift and added a Dictionary API for translating the editor UI. This is a developer-first product. It suits React teams that already have a component library and want a production-grade editor inside their product rather than a separate site builder. It is not a turnkey CMS: you define the components and fields, and it is React-only. Teams wanting a hosted no-code builder should look at Framer or Webflow instead, but those do not run inside your app or store JSON on your infrastructure.
Behind the Verdict
The core insight behind Puck is that the hard part of visual editing is not the drag-and-drop surface — it is the contract between the editor and your component library. Puck asks you to define that contract explicitly: render functions, fields, root configuration, categories, dynamic props. That work is upfront and real, but once it exists you get an editing surface that only produces things your codebase can actually render, which is exactly the failure mode that plagues HTML-based builders. Strengths. JSON output on your own backend removes the lock-in objection entirely; the MIT-licensed core (13.4k GitHub stars, ~1,023,000 monthly downloads) means you can ship it commercially. The extension surface is unusually deep for this category — plugin API for custom fields and UI overrides, permissions API for feature toggling, field transforms, overlay portals, internal Puck API, theming via CSS custom properties (0.22), and a Dictionary API for localizing the editor UI itself (0.23). Layout support covers multi-column and nested components with advanced CSS layouts, and React Server Components are supported as an opt-in. AI, honestly framed. Puck AI is a paid add-on, not part of the MIT core. The pitch is that generation runs against your components, your data, and your business context rather than an open canvas — the pricing page's own example shows the agent fetching pricing data and applying a tone of voice. Puck AI 0.8 added a next-gen agent, design mode, and BYOK. Headless generation via API is the piece most teams will underestimate: it lets you drive page generation from your own agents and pipelines rather than from a human in the editor. Weaknesses and fit. The pay-as-you-go tier charges the model provider's list price plus a 20% platform fee when Puck supplies the model; Launch at $199/mo and Growth at $799/mo remove that fee if you bring your own key. Training opt-out is listed only on On-prem AI Enterprise, which is custom-priced and contact-sales. React-only, no turnkey CMS, and no plug-and-play integrations — you wire your own backend APIs. Viewports are handled by rendering in a same-origin iframe, which is worth testing against your own auth and styling setup before committing. Where it fits: white-label products giving every customer a page builder, design system teams letting non-technical contributors build brand-safe pages, internal tools, and enterprise content ops that need consistency at volume. Where it does not: marketing teams who want a hosted site builder with zero engineering involvement.
Researching Puck? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Real-world workflow fit
Concrete scenarios for the personas Puck actually fits — and what changes day-one when you adopt it.
Register hero, pricing table, and testimonial components with Puck fields, embed the editor in the app, and hand it to marketing with a permissions API that hides deletion.
Outcome: Marketing ships on-brand pages as JSON your backend serves, with no CMS sync and no design review bottleneck.
Expose Puck's editor to each customer with their own component set, then use headless generation via API to produce starter layouts when a new account is created.
Outcome: Every customer gets a self-serve builder inside the product, backed by JSON stored on your infrastructure.
Wire Puck AI to your backend data and business context so the agent fills real product and pricing values, with design mode generating new components inside the guardrails you set.
Outcome: Draft pages arrive pre-populated with live data instead of placeholder copy, and generated components stay inside the design system.
Use Cases
- Build and edit marketing pages using your existing React component library.
- Generate entire page layouts from text prompts, constrained to your brand rules.
- Automate content publishing with headless AI generation via API.
- White-label a visual editor for your commercial SaaS product.
- Let non-technical team members create on-brand pages without code.
- Migrate legacy content into a component-based system with data migration tools.
- Build internal tools for your team to ship interfaces faster.
- Personalize pages per user with data-driven generative UI.
Models Under the Hood
as of 2026-10-08
Limitations
- Puck's AI capabilities (AI Copilot and the headless generation API) are cloud features with usage-based billing: when Puck provides the model, requests consume credit at the model provider's list price plus a 20% platform fee on the Pay-as-you-go tier, while Launch ($199/mo) and Growth ($799/mo) use BYOK at token cost + 0%.
- BYOK routes requests through Puck's servers and is only available on Launch and Growth, and additional controls (priority support, training opt-out, dedicated Slack, GitHub issue prioritization) are gated to higher tiers, with private models and SLA-backed support only on the custom-priced On-prem AI Enterprise plan.
- The core editor is an MIT-licensed React component, so it is React-only and requires developers to integrate their own components, design rules, backend APIs, and root configuration — it is not a turnkey site builder.
as of 2026-09-27
Verification history
We have re-verified Puck 8 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
Showing the 6 most recent of 8 verification passes.
Free to cite with attribution — this page re-verifies continuously.
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Plans compared
For each published Puck tier: who it actually fits, and what it adds vs. the previous tier. Cross-reference the cost calculator above for projected annual outlay.
Open-source
$0
Ideal for
React teams that already own a component library and want embedded editing without paying for AI features.
What this tier adds
Starting tier: MIT-licensed core editor you self-host, with no AI Copilot, no hosted API, and no token billing.
Puck Cloud Pay-as-you-go
Metered
Ideal for
Solo devs and small teams shipping AI prototypes who want to test generation before committing to a subscription.
What this tier adds
Adds AI Copilot and the headless API with metered billing: model provider list price plus a 20% platform fee, with spend controls and manual or auto-reload top-ups.
Launch
$199/mo billed monthly
Ideal for
Businesses running Puck in production in customer-facing apps that need support and predictable AI costs.
What this tier adds
$199/mo billed monthly removes the 20% platform fee when you bring your own key, and adds priority support; requests still route through Puck's servers.
Growth
$799/mo billed monthly
Ideal for
Scaling businesses that need Puck's team on hand, an SLA, and influence over the open-source roadmap.
What this tier adds
$799/mo billed monthly adds SLA-backed support, GitHub issue prioritization, and a dedicated Slack channel on top of Launch.
On-prem AI Enterprise
Custom
Ideal for
Global-scale, compliance-driven organizations that need private models and single-tenant deployment.
What this tier adds
Adds private models, on-prem or single-tenant deployment, training opt-out, negotiated platform fees, and regular office hours at custom pricing.
Where the pricing makes sense
The company stage and team size where Puck's pricing actually pencils out — and where peers do it cheaper.
Puck Cloud Pay-as-you-go fits solo devs and AI prototypes on metered token cost plus 20%; Launch at $199/mo billed monthly is the realistic floor for production use, and Growth at $799/mo billed monthly adds priority support, an SLA, GitHub issue prioritization, and a dedicated Slack channel. Both are mid-market pricing compared with a self-hosted MIT core you can run for free, and cheaper than standing up a bespoke editor team — but pricier than a hosted site builder for teams with no React
Setup time & first value
How long it actually takes to get something useful out of Puck — broken out by persona, not the marketing-page minute.
A working editor embedded in an existing React app: roughly an hour for a first component and field mapping. A usable multi-component editor with root configuration, categories, and permissions: a day or two. Full production rollout with data migration and AI configuration: one to two weeks, mostly spent defining components and business context.
Switching to or from Puck
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From a headless CMS like Contentful or Sanity: map your content types to Puck components and fields, then move existing records through Puck's data migration tools.
- →From a legacy Puck release: use Puck's data migration support to cover breaking changes between versions and your own breaking prop changes.
- →From hand-written React pages: register the existing components as Puck blocks and recreate the page structure as Puck JSON.
- →From a hosted site builder: export the content, rebuild the layout as Puck components, and store the resulting JSON on your own backend.
- ↗To a hosted site builder like Framer or Webflow: rebuild pages in their visual canvas, accepting that the output no longer lives as JSON on your infrastructure.
- ↗To raw React components: render the stored Puck JSON against your component library and drop the editor if editing is no longer needed.
- ↗To a headless CMS: map Puck's component data model onto your CMS content types.
Resources & Guides
Tutorials & Learning
YouTube returned 6 videos for “Puck”, and we withheld 6: 6 could not be judged, because “Puck” is a single word that other videos use for other things. We are showing none, because we could not prove any of them are about Puck.
Official links
Tools that pair well with Puck
Common stack mates teams adopt alongside Puck, with the specific reason each pairing earns its keep.
Onlook
Local-first visual editor for React and TailwindCSS where the code is the source of truth.
Webflow AI Site Builder
AI site generation, code components, and SEO/AEO audits built into the Webflow platform you already publish on
Draftbit
Build native mobile and web apps with AI agents and full visual editing control
Featured Head-to-Head Comparisons
Puck vs Polycam
Polycam and Puck serve entirely different needs. Choose Polycam if you're an architect, engineer, or media creator needing to scan real-world objects and spaces into 3D models or floor plans. Choose Puck if you're a React developer or design system team wanting an open-source, brand-constrained visual editor for building pages. They are not competitors.
Puck vs Bito
Bito and Puck serve completely different needs. Bito is for engineering teams using AI coding agents in multi-repo environments, providing system-wide context and architectural intelligence. Puck is for React developers building design-system-constrained visual editors, offering drag-and-drop and AI page generation. Choose Bito if you need AI-assisted code generation and impact analysis across a complex codebase; choose Puck if you need a brand-safe visual editor built on your own component library.
Puck vs Cognition Ai
Choose Cognition AI if you're an enterprise engineering team needing an autonomous agent that writes and ships production code across platforms, backed by a financial guarantee. Choose Puck if you're a React team wanting an open-source visual editor that lets non-technical users build on-brand pages using your own components. They serve completely different needs—Cognition replaces a junior engineer, Puck replaces a CMS editor.
Alternatives to Puck
View all
Onlook
Local-first visual editor for React and TailwindCSS where the code is the source of truth.
Webflow AI Site Builder
AI site generation, code components, and SEO/AEO audits built into the Webflow platform you already publish on
Frequently Asked Questions
Categories
Best-of guides
Used Puck? Help shape our editorial sentiment research.