Puck is a modular, open-source visual editor for React.js that lets teams assemble their own drag-and-drop editing experiences from their existing React components, and it is aimed at developers building internal systems or commercial products who want to own both the editor and the data behind it.

What it is

Puck is an open-source visual editor written in TypeScript and distributed under the MIT licence. It lives in the React.js ecosystem and is itself a React component, so it renders inside an existing application rather than acting as a standalone hosted service. A developer describes the available building blocks in a config object, mounts the Puck component to expose the editing surface, and later mounts the Render component from the same @puckeditor/core package to display what was saved. The repository carries topics including drag-and-drop, page-builder, no-code, and visual-editor, which describe the category it belongs to rather than a separate product surface.

The concrete problem it solves is the editing interface that a team would otherwise have to write from scratch. Anyone who wants content editors, marketers, or internal operators to arrange pages and sections without touching code normally faces a choice between hand-building a bespoke drag-and-drop layer inside their own codebase or adopting a third-party hosted page builder whose components, storage, and rendering pipeline sit outside the application. Puck replaces that bespoke drag-and-drop layer with a configurable component, while keeping the component definitions, the saved data, and the rendering inside the host application, so the same React components serve both the editor and the rendered page.

Key capabilities

• Exposes a Puck component from @puckeditor/core that renders the editing surface directly inside a React application.
• Exposes a matching Render component from the same package, so the editor and the published page share one component definition.
• Takes a config object built from components, where each entry declares its own fields and render function; the README example uses a HeadingBlock with a children field of type: "text".
• Accepts an initialData value and a save callback, described in the README as the point where data is written to a database.
• Supports every React.js environment, including Next.js, because the editor is a React component rather than a framework-specific runtime.
• Ships scaffolding through npx create-puck-app my-app, with recipes for next (App Router and static page generation) and react-router (React Router v7 with dynamic routes for creating pages at any level).
• Maintains an awesome-puck community repository for plugins and custom fields, alongside a Discord server for discussion.

Who uses it and how

• Teams building internal systems use Puck to give non-developer colleagues a controlled editing surface over components that already exist in the codebase, which the MIT licence permits without commercial restriction.
• Product teams shipping commercial applications use the same setup, since the MIT licence covers commercial use and no vendor relationship is required.
• Next.js projects adopt the next recipe to combine the editor with App Router routing and static page generation.
• React Router v7 projects adopt the react-router recipe, using dynamic routes to create pages at any level of the site.
• Teams needing additional fields or integrations draw on the awesome-puck community repository, and can escalate to hands-on support or consultancy through the discovery call link in the README.

Getting started

Install the package with npm i @puckeditor/core --save, or scaffold a pre-configured project with npx create-puck-app my-app. Full documentation lives at puckeditor.com, with a live demo at demo.puckeditor.com.

How it compares

No alternative products are listed in the facts for this registry, and no comparable tools are named there either, so Puck stands alone in this registry rather than being contrasted with a named set of paid equivalents. What can be stated is that it is MIT licensed, that it runs inside the adopter's own React application, and that the README describes the arrangement as one where the adopter owns the data with no vendor lock-in.

When to use it — and when not to

Puck is a component, not a service: it ships no database, no storage layer, no authentication, and no managed hosting, so a self-hoster must supply persistence and wire the save callback to their own database, plus load that data into initialData for rendering. Anyone without an existing React codebase, or anyone who wants a ready-made hosted CMS rather than an editor embedded in their own application, should look elsewhere. The repository currently carries 200 open issues, and the README excerpt leaves the Puck and Render usage examples truncated, so prospective adopters should read the full documentation at puckeditor.com before committing.

npm i @puckeditor/core --save # or npx create-puck-app my-app

// Editor.jsx
import { Puck } from "@puckeditor/core";

// Create Puck component config
const config = {
  components: {
    HeadingBlock: {
      fields: {
        children: {
          type: "text",
        },
      },
      render: ({ children }) => {
        return <h1>{children}</h1>;
      },
    },
  },
};

// Describe the initial data
const initialData = {};

// Save the data to your database
const save = (data) => {};

// Render Puck editor
export function Editor() {
  return <Puck config={config} data={initialData} onPublish={save} />;
}

// Page.jsx
import { Render } from "@puckeditor/core";

export function Page() {
  return <Render config={config} data={data} />;
}

npx create-puck-app my-app