Introduction
Welcome to the Puck documentation!
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.
Puck is also licensed under MIT, making it suitable for both internal systems and commercial applications.
Main Features
| Feature | Description |
|---|---|
| Component Configuration | Integrate your own components with Puck by providing render functions and configuring fields that map to your props. |
| Root Configuration | Customize the root component that wraps all other Puck components. |
| Multi-column Layouts | Use DropZones to build more multi-column layouts by nesting components. |
| Categories | Group your components in the side bar. |
| Dynamic Props | Dynamically set props after user input and mark fields as read-only |
| External Data Sources | Load content from a third-party CMS or other data source |
| Server Components | Opt-in support for React Server Components |
| Data Migration | Migrate between breaking Puck releases and your own breaking prop changes |
| Viewports | Preview and edit your content in a same-origin iframe to simulate different viewports |
Join our Community
If you have any questions about Puck, please join us on GitHub (opens in a new tab) or Discord (opens in a new tab).
Hire the Puck Team
Puck is developed and maintained by Measured, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.
If you need support integrating Puck or creating a beautiful component library, please reach out via our website (opens in a new tab).
License
Puck is licensed under MIT.