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 | Create multi-column layouts using nested components. Now supports advanced CSS layouts. |
| Categories | Group your components in the side bar. |
| Dynamic Props | Dynamically set props after user input and mark fields as read-only |
| Dynamic Fields | Dynamically set fields based on user input |
| 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 |
| Feature Toggling | Toggle Puck features, like duplication or deletion, via the permissions API. |
Get Support
If you have any questions about Puck, please open a GitHub issue or join us on Discord.
Or book a discovery call for hands-on support and consultancy.
License
Puck is licensed under MIT.