puck

Puck is an open-source visual page editor designed to be embedded inside React applications. It gives end users a drag-and-drop interface for building and arranging pages from components that a developer defines. Instead of writing code, users can click, drag, and configure components in a visual canvas and publish the result.

The key distinction is that Puck is not a standalone product. Developers install it as a React component inside their own application and register their own custom components with it. For example, a developer might define a "HeroBlock" component with configurable text and image fields. Users of the application can then drag that block onto a page, fill in the fields through a sidebar, and publish the layout. The resulting data is stored wherever the developer chooses, typically a database the developer controls. There is no external service or vendor holding the data.

Because Puck is just a React component, it integrates with the popular React-based frameworks. The README includes starter templates for Next.js, Remix, and React Router, each showing how to wire up the editor and the page renderer with minimal boilerplate. The renderer, a separate component called Render, takes the same data structure and displays the published page without the editing interface.

Puck is aimed at developers who are building content management systems, landing page builders, or similar tools where non-technical users need to control layout. It removes the need to build a custom drag-and-drop editor from scratch. The MIT license means it can be used in both internal tools and commercial products without licensing fees.

The README is concise and focused on setup. A separate documentation site and community Discord handle deeper questions and plugin development. An ecosystem repository called awesome-puck lists community-contributed plugins and custom field types.