puckeditor/puck

★ 12,657TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((puck))
    What it does
      Visual page editor
      Drag and drop
      No-code layout
    How it works
      Developer defines parts
      Users drag and fill
      Data stays yours
    Tech Stack
      React
      TypeScript
      Next.js
      Remix
    Audience
      React developers
      CMS builders
    Use Cases
      Landing page builders
      Internal editors

mindmap root((puck)) What it does Visual page editor Drag and drop No-code layout How it works Developer defines parts Users drag and fill Data stays yours Tech Stack React TypeScript Next.js Remix Audience React developers CMS builders Use Cases Landing page builders Internal editors

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Embed a visual drag-and-drop editor inside your React or Next.js app so content editors can build pages without touching code.

USE CASE 2

Build a custom content management system where non-technical clients arrange branded components into landing pages and save them to your database.

USE CASE 3

Create a no-code page builder SaaS product without implementing drag-and-drop logic from scratch.

USE CASE 4

Add an in-app layout editor to a Remix application using the starter template so users can publish custom page layouts.

Tech stack

TypeScriptReactNext.jsRemixReact Router

Getting it running

Difficulty · moderate Time to first run · 30min

Requires an existing React or Next.js project to embed into, the editor is a React component, not a standalone app.

MIT license, use freely for any purpose including commercial products, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1

Using the Puck React library, set up a minimal page editor with two custom components: a HeroBlock with a headline and subtext field, and a Button with a label and URL field.

Prompt 2

I'm building a landing page builder with Puck in Next.js. Show me how to set up the editor route and the public renderer route so they share the same data structure stored in a Postgres database.

Prompt 3

How do I add a custom color-picker field type to Puck so users can choose a background color from the sidebar when configuring a component?

Prompt 4

Set up Puck with Remix so the editor saves layout data via a Remix action and the published page fetches and renders that layout without the editing interface.

Prompt 5

Show me how to use Puck's Render component to display a saved page layout on a static page without loading the full editor bundle.

Open on GitHub → Explain another repo

← puckeditor on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.