Puck
The visual editor for React.
Last verified:
What is Puck?
Puck is a modular, open-source visual editor for React.js that enables teams to build custom drag-and-drop experiences using their own React components and design system. As an agentic visual editor, it allows users to ship production interfaces without engineering bottlenecks by providing an intuitive drag-and-drop interface for building pages in minutes. The editor is constrained by your design system, ensuring every experience is on-brand by default.
Key features include AI-generated UI that understands your components, brand, and data; component configuration with custom render functions and field mappings; multi-column layouts with nested components; external data source integration; React Server Components support; dynamic props and fields; viewport preview capabilities; and a permissions API for feature toggling. The Puck Cloud adds AI copilot for page generation, headless AI generation via API, versioned page datastore, and multiplayer collaboration with live syncing.
Puck is designed for React.js developers, design system teams, agencies, businesses wanting a standalone CMS, enterprises needing automated publishing workflows, companies building white-label products, and organizations empowering non-team members to build applications using their design system. It plays well with all React environments including Next.js, and since it's just a React component, you own your data with no vendor lock-in.
Puck pricing
Pricing model: Freemium
Puck has a free open-source core under MIT license. Puck Cloud offers paid plans: Pro plan at $25/month with $25 monthly AI credit (~85 AI generations), includes AI copilot for generating pages with your components. Business plan at $150/month with $150 monthly AI credit (~500 AI generations), adds headless AI generation via API and GitHub issue prioritization. Growth plan at $500/month with $500 monthly AI credit (~1,670 AI generations), adds dedicated Slack support channel with Puck core team, bring-your-own-key, and SSO (coming soon). All plans support top-up available and auto-reload. Enterprise plans available for scale. Credit metering depends on complexity - generating a page via API might cost $0.30, updating might cost $0.15.
Puck pros
- Open-source MIT license suitable for commercial applications
- No vendor lock-in - you own your data
- Works with all React environments including Next.js
- Drag-and-drop interface builds pages in minutes
- On-brand by default through design system constraints
- AI constrained to your components, brand, and data
- 12,700+ GitHub stars and 497,000+ monthly downloads
- Custom component configuration with field mappings
- Supports React Server Components
- Multi-column layouts with nested components
- External data source integration from third-party CMS
- Dynamic props and fields based on user input
- Viewport preview in same-origin iframe
- Feature toggling via permissions API
- AI copilot generates pages with your components
- Headless AI generation via API on higher plans
- Data migration support for breaking changes
- Categories for grouping components in sidebar
- Read-only field support
- Search in external fields modal
Puck cons
- Requires React.js knowledge to implement
- Multiplayer collaboration coming soon, not yet available
- Pages feature (versioned datastore) coming soon
- SSO only available on Growth plan and coming soon
- AI requires Puck Cloud subscription
- Credit-based metering can get expensive at scale
- Plugin API is still experimental
- v0.13.0 had breaking changes to plugin API
- Limited to React ecosystem only
- No native mobile app editor
Frequently asked questions about Puck
What is Puck?
Puck is a modular, open-source visual editor for React.js. You can use Puck to build custom drag-and-drop experiences with your own application and React components. Because Puck is just a React component, it plays well with all React.js environments, including Next.js. You own your data and there's no vendor lock-in.
Is Puck open source?
Yes, the core of Puck is open-source and licensed under MIT, making it suitable for both internal systems and commercial applications. The Puck editor is licensed under MIT.
How does Puck AI work?
Puck AI generates UI with AI that understands your components, brand, and data. The AI is constrained by your rules, components, brand, and data to ensure generated interfaces are on-brand. AI features require Puck Cloud subscription with credit-based metering.
How does metering work for Puck Cloud?
Plans with metering use a credit system for AI actions via the Puck Cloud. The amount of credit used depends on the complexity of your Puck config and the action carried out. Generating a page using the API might cost $0.30, while updating it might cost $0.15.
What happens if I run out of credit?
If you run out of credits, you can either purchase additional credits or upgrade to a higher plan. You can also configure auto-reload to automatically top-up when your credit is running low.
How can I get GitHub issue prioritization?
GitHub issue prioritization is included in Business and Growth plans to allow you to request custom features and enhancements to the open-source Puck editor. You don't need to use other Cloud features to take advantage of GitHub prioritization.
Do you offer professional services?
Yes, professional services such as feature development are available upon request. You can get in touch to request more information about hands-on support and consultancy.
Can I use Puck with Next.js?
Yes, because Puck is just a React component, it plays well with all React.js environments including Next.js. You can integrate Puck into Next.js applications without issues.
How do I install Puck?
Install the package using npm i @puckeditor/core --save, pnpm add @puckeditor/core, yarn add @puckeditor/core, or bun add @puckeditor/core. Alternatively, generate a Puck application using a recipe with npx create-puck-app my-app.
What are the main use cases for Puck?
Teams use Puck as a standalone CMS for business/agency/open-source projects, for automated enterprise content publishing workflows, as white-label products incorporated into commercial applications, and for no-code development to empower non-technical team members to build applications using your design system.