Repolode
Submit
puckeditor

puckeditor/puck

A modular, open-source visual drag-and-drop editor for React that renders with your own components and data.

Open-source alternative to:WebflowFramer

View on GitHubWebsite
Stars
13,490
Forks
1,001
Open issues
198
Last commit
4 days ago

What is it?

Puck is a visual editor for React.js that lets you build drag-and-drop page experiences out of your own application components. It is distributed as a React component, so it can be embedded into existing React apps and works with environments such as Next.js.

You define a config that maps component names to their editable fields and render functions. The editor produces a JSON data structure that you save to your own database, and a separate Render component turns that data back into a page. Data stays under your control, with no hosted backend required.

The project is MIT licensed, so it can be used in internal tools and commercial products. Starter recipes for Next.js and React Router v7 are available through create-puck-app.

Key features

  • 01Drag-and-drop editing built from your own React components.
  • 02Component config defines editable fields and render output.
  • 03Editor output is plain JSON that you store in your own database.
  • 04A separate Render component displays saved pages.
  • 05Works in Next.js and other React environments.
  • 06Starter recipes available via create-puck-app.

Use cases

  • Letting non-developers assemble landing pages from an existing design system.
  • Adding a page builder to a React or Next.js content management workflow.
  • Building internal tools where marketing teams edit layouts without code.

Quick start

  1. 1

    Install the package

    npm i @puckeditor/core --save
  2. 2

    Render the editor with Puck component and config

  3. 3

    Render the published page with the Render component

Things to know

  • Requires a React project; it is a React component, not a standalone app.

Topics

#react#visual-editor#page-builder#drag-and-drop#no-code#typescript#ai#builder#draganddrop#nocode

FAQ

What is puck?
A modular, open-source visual drag-and-drop editor for React that renders with your own components and data. Puck is a visual editor for React.js that lets you build drag-and-drop page experiences out of your own application components. It is distributed as a React component, so it can be embedded into existing React apps and works with environments such as Next.js.
Is puck free to use? What license does it have?
puck is open source under the MIT license. Check the license terms before using it in commercial products.
Is puck still maintained?
Actively maintained. The last commit to puck was on Oct 16, 2026.
What can I use puck for?
Letting non-developers assemble landing pages from an existing design system. Adding a page builder to a React or Next.js content management workflow. Building internal tools where marketing teams edit layouts without code.
How do I install puck?
Install the package: npm i @puckeditor/core --save Render the editor with Puck component and config Render the published page with the Render component
Where can I get puck?
The source code and installation instructions are on GitHub: https://github.com/puckeditor/puck

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects