Puck
Embeddable visual editor for React that lets non-coders and agents build on-brand pages.
Puck is the right call if you're a React team that wants a visual editor embedded in your product without handing over control. The AI's constraint to your own components keeps brand fidelity high, which most generative UI tools miss. BYOK and on-prem options make it viable for enterprises with strict data rules. If you're not on React or want a turnkey CMS, skip it.
Verified 7d ago · liveness 65/100 · cite: rightaichoice.com/tools/puck
- React developers building custom CMS or content tools with their own component library
- Design system teams empowering non-technical contributors with brand-safe editing
- Product teams shipping brand-constrained, production-ready UI without engineering bottlenecks
- Agencies white-labeling a visual editor for client projects
- Non-React projects — requires a React.js environment
- Teams wanting a pre-built, turnkey CMS without custom component setup
- Beginners with no React experience — you must define your own components and fields
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 you don't use React, need a turnkey CMS without custom component setup, or require versioned page storage and multiplayer collaboration today (still 'coming soon').
Going past your included AI credits on the Pay-as-you-go plan adds token costs plus a 20% platform fee, which can add up at scale.
Puck Cloud starts at metered pay-as-you-go for prototypes and $99/mo (introductory) for production. BYOK lets you control costs, and the token + 20% platform fee is transparent. Compared to Lovable (no free tier, repo lock-in), Puck is cheaper for React teams already holding a component library. For high-volume, on-prem needs, it's pricier than self-hosting the open-source core.
In short
Puck — Embeddable visual editor for React that lets non-coders and agents build on-brand pages. Best for React developers building custom CMS or content tools with their own component library, Design system teams empowering non-technical contributors with brand-safe editing, Product teams shipping brand-constrained, production-ready UI without engineering bottlenecks. Free to start; paid plans from $799/mo.
What's new in Puck
Checked 3 days agoAcross the latest 5 updates: 4 feature updates and 1 launch.
Puck 0.23: Drag-and-drop improvements and localization
Puck 0.23 improves drag-and-drop to reduce layout shift and adds a Dictionary API for UI localization.
Introducing Puck AI
Puck AI launches as a visual AI builder for generating production interfaces inside your app.
Puck AI 0.8: Next-gen agent, design mode & BYOK
Puck AI 0.8 adds a next-gen agent, BYOK, and design mode for creating components on the fly.
Puck 0.22: Theming & styling improvements
Puck 0.22 introduces theming with CSS custom properties, automatic CSS loading, and host style sync controls.
Puck AI 0.7: File attachments
Puck AI 0.7 adds file attachment support to chat, letting users drop images, PDFs, and text files into prompts.
What people actually say about Puck — is it worth it?
We ran a structured research pass across product reviews, community discussions, and post-purchase forum threads to surface the patterns vendors won't publish themselves. Below: the recurring strengths, the hidden costs people mention most, and the cohort that consistently regrets adopting this tool.
48 mentions across 3 sources (Reddit, Hacker News, Lemmy) · researched Jul 3, 2026.
- +Open source (MIT) with full code access
- +Uses your own React components as building blocks
- +AI page generation constrained to brand design system
- +Headless API for programmatic page editing
- +Supports React Server Components and Next.js
- −Almost no community feedback exists for evaluation
- −Name collision with Steam Controller hardware
- −Cloud features (AI, collaboration) not yet proven
- −No evidence of production usage or case studies
- −Support is GitHub issues only, uncertain responsiveness
- • AI API usage may incur overage charges beyond Business+ tier
- • Self-hosting requires server costs and maintenance
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: August 2026
How we score →Key Features
- Embeddable WYSIWYG drag-and-drop page builder
- Multi-column layouts with nested components
- Dynamic props and fields based on user input
- Rich text editing
- External data source integration (CMS, APIs)
- React Server Components support
- Data migration tools for release upgrades
- Viewport preview in same-origin iframe
- Feature toggling via permissions API
- Plugin API for custom fields and UI overrides
- Theming via CSS custom properties (v0.22)
- Automatic CSS loading and host style sync (v0.22)
- AI copilot in editor for page generation
- Headless AI page generation via API
- Design mode to create new components on the fly (AI 0.8)
About Puck
Puck is an open-source, MIT-licensed visual editor that you embed directly in any React app—including Next.js—so your own components become the building blocks for a WYSIWYG drag-and-drop page builder. Non-technical users get a familiar editing interface, while developers keep full control because everything is stored as JSON on your own backend. The core editor supports multi-column layouts, dynamic props, external data from your CMS or APIs, React Server Components, and a permissions API for feature toggling. Puck 0.22 added theming via CSS custom properties, automatic CSS loading, and host style sync, making it easier to match your app's look and feel. Puck AI layers an agentic builder on top. The 0.8 release introduced a next-gen agent, design mode for creating components on the fly, and BYOK (bring your own key) so you control model costs. You can attach files (images, PDFs, text) to the chat—added in 0.7—and generate pages headlessly via API. Brand rules are enforced by constraining output to your own components, and you can connect backend APIs to keep generated pages grounded in real data. Puck is built for React development teams that already have a component library and want a production-ready editor without vendor lock-in. It's especially strong for white-labeling, internal tools, personalized interfaces, and enterprise content operations. The tradeoff: it's not a turnkey CMS. You must define your components and fields, and it's React-only by design. For teams that want a fully-hosted, no-code site builder, tools like Framer or Webflow are simpler—but they don't run inside your app or give you JSON storage on your own infrastructure.
Behind the Verdict
We've watched Puck evolve from a niche open-source editor into a serious agentic builder, and the 0.8 release finally makes the AI story compelling. The next-gen agent, design mode, and BYOK aren't just add-ons—they directly address the two biggest objections we hear about generative UI: brand fidelity and cost control. When the AI is forced to use your components, the output actually looks like your product, not a generic template. That's a different value proposition than most AI site builders, which give you locked-in code and no data ownership. So when should you pick Puck? If you're a React team with an existing component library, and you want non-technical colleagues or end users to build pages without engineering bottlenecks, it's a strong fit. The open-source core means you can start free and see if it works before paying. The MIT license and JSON storage mean no lock-in—you could even fork it and go your own way if needed. The ability to run the AI with BYOK on Launch and Growth plans is a smart move for teams that want to control spend or use specific models. When should you pass? If you're not on React, stop right there—this requires a React environment. If you want a turnkey CMS with templates out of the box, Puck will frustrate you because you have to define your components and fields first. Beginners with no React experience will hit a wall setting it up. And if you need to edit arbitrary HTML visually (not component-based), this isn't the tool. Compared to the closest alternative—a coding agent like GitHub Copilot—Puck is for non-developers. Coding agents output raw code that still needs a developer to integrate; Puck outputs JSON that fits directly into your app, and non-technical users can do the editing. Compared to AI site builders like Framer,
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.
Embed Puck in the app, define product components and fields, then let non-technical teammates build landing pages.
Outcome: Non-coders iterate on pages without engineering, while devs control the output and data stays in your database.
Customize Puck's editor and use the plugin API to add your own fields, then deploy for clients.
Outcome: Clients get a branded editing experience, and you generate new revenue with a customizable product.
Use headless AI generation via API and BYOK to produce on-brand pages at scale.
Outcome: AI produces on-brand pages with your data, and BYOK controls costs, improving content output speed and consistency.
Use Cases
- Build and edit marketing pages using your existing React component library.
- Generate entire page layouts from text prompts, constrained to your brand.
- Automate content publishing workflows with headless AI generation via API.
- White-label a visual editor for your commercial SaaS product.
- Allow non-technical team members to create on-brand pages without code.
- Migrate legacy content into a component-based system with data migration tools.
- Personalize page experiences for each user with data-driven AI generation.
- Build internal tools for your team to ship interfaces faster.
Models Under the Hood
as of 2026-08-23
Limitations
- AI features (copilot and headless generation) are gated behind paid Puck Cloud plans with token-based billing.
- On-prem enterprise plans support private models.
- Usage is subject to platform fees unless BYOK is used.
as of 2026-08-12
Verification history
We have re-verified Puck 6 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
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
Puck Cloud Pay-as-you-go
Metered
Ideal for
Solo developers and small teams experimenting with Puck AI on individual projects, with minimal upfront commitment.
What this tier adds
Metered billing: you pay for tokens used plus a 20% platform fee, but no monthly subscription or BYOK.
Launch
$99/mo (introductory, regular $199/mo)
Ideal for
Startups and businesses that need production-grade AI in Puck, with a low monthly cost and BYOK to avoid platform fees.
What this tier adds
Adds BYOK (token cost + 0% platform fee) and priority support compared to Pay-as-you-go.
Growth
$799/mo
Ideal for
Scaling businesses that rely on Puck AI and want dedicated support, training opt-out, and influence on the roadmap.
What this tier adds
Adds training opt-out, dedicated Slack channel, and GitHub issue prioritization on top of Launch.
On-prem AI Enterprise
Custom
Ideal for
Large enterprises with strict data compliance and global-scale needs that require private models and SLA-backed support.
What this tier adds
On-prem or single-tenant deployment with private models, negotiated pricing, and SLA-backed support.
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 starts at metered pay-as-you-go for prototypes and $99/mo (introductory) for production. BYOK lets you control costs, and the token + 20% platform fee is transparent. Compared to Lovable (no free tier, repo lock-in), Puck is cheaper for React teams already holding a component library. For high-volume, on-prem needs, it's pricier than self-hosting the open-source core.
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.
For a React developer with a component library, integrating the editor takes a few hours to a day. Configuring components and fields takes longer. Adding AI is quick once you've set up the editor. On-prem AI requires a sales process and may take weeks.
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 Sanity or Contentful: Export entry data as JSON, map to your Puck components, and use Puck's data migration tools.
- ↗To another React editor: Export your Puck JSON and map to the new system's schema.
- ↗To a static site: Use the headless API to generate HTML/JSON at build time.
Resources & Guides
Tutorials & Learning
Official links
Tools that pair well with Puck
Common stack mates teams adopt alongside Puck, with the specific reason each pairing earns its keep.
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
Elementor AI Website Builder
Agentic AI inside WordPress: prompt full pages, design systems, forms, and loops as editable Elementor content.
Frequently Asked Questions
Categories
Best-of guides
Used Puck? Help shape our editorial sentiment research.