Puck is an open source visual editor designed for React applications that enables developers to build customizable drag-and-drop page editing experiences. It allows teams to create their own page builders by defining React components that can be arranged and configured through a visual interface. Puck is component-based and configuration-driven, meaning developers specify how components render and which editable fields control their properties. Puck integrates directly into existing React environments and works well with frameworks such as Next.js, enabling developers to embed editing capabilities directly inside their applications. It operates with a structured data model that stores content as a JSON payload, allowing the same configuration to power both the editing interface and the production rendering of pages. This approach gives developers full ownership of their content data while avoiding vendor lock-in.
Features
- Drag-and-drop visual editor for arranging React components
- Configuration system for defining editable component fields
- Separate editing and rendering modes for content creation and display
- JSON-based data structure for storing and rendering page content
- Integration with React frameworks such as Next.js, Remix, and React Router
- Extensible architecture with plugins, dynamic fields, and custom layouts