Puck is a visual editor for React that lets developers build custom drag-and-drop experiences with their own React components.
Puck solves the problem of creating editable, visual page builders within React applications without requiring a separate backend service or vendor lock-in. It works as a modular React component that integrates directly into any React environment, including Next.js. Developers define their own components and Puck provides the visual editing interface, allowing end users to drag and drop those components to build pages. The editor outputs structured data that can be rendered back through Puck's rendering component, keeping all data under the developer's control.
Puck suits teams building internal tools, content management systems, or commercial applications where a customizable visual editor is needed but vendor-hosted solutions are undesirable. It works well for projects already committed to React and Next.js. The tool is particularly valuable for applications where the component library is domain-specific or proprietary, since Puck lets you expose exactly the components you want users to edit. The project provides starter recipes for Next.js with static generation and React Router applications to accelerate initial setup.
The project maintains active community engagement through a Discord server and an awesome-puck community repository for sharing plugins and custom fields. Development appears responsive to user needs, with support available through GitHub issues and direct consultation channels. The codebase is written in TypeScript and distributed under the MIT license, supporting both internal and commercial use without restrictions.
