Puck
A visual drag-and-drop page editor you embed in your own React app.
- Stars
- 13.6k
- Forks
- 1k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 8 days ago
- Type
- Library
What it is
Puck is an open-source React component that gives your app a visual editor, so people can build pages by dragging and arranging components you define. You control the components, the data is yours to store, and the README says there is no vendor lock-in. It is released under the MIT license.
- Let editors build landing pages from your own React components
- Save the page layout data to your own database through the onPublish callback
- Render saved pages on the front end with the Render component
- Start a new project from the provided next or react-router recipes
Great for
- React developers adding a page builder to an existing app
- Teams that want content editors to arrange pre-approved components visually
- Projects using Next.js or React Router, which the README mentions as supported recipes
- Companies that need a self-hosted, MIT-licensed editor
Not ideal for
- People who want a ready-made website builder with hosting and no coding, since Puck is a library you integrate into your own code
- Non-React projects, because Puck is described as a React component
- Those who need the README-documented support beyond community channels, which is limited to GitHub issues, Discord, or a paid consultancy call
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm
Install the package
npm i @puckeditor/core --saveOr create a pre-configured app
npx create-puck-app my-app - 2
Run it
- Install the package or run create-puck-app to generate a starter project
- Define a config object with your own React components and their editable fields
- Render the Puck editor component with your config and initial data
- Render saved data on your page with the Render component
- 3
Get the most out of it
- Start from the next or react-router recipes to see a working setup
- Browse the awesome-puck community repo for plugins and custom fields
- Use the live demo at demo.puckeditor.com to see the editing experience before integrating
- Check the documentation at puckeditor.com/docs for configuration options
Downloads
Strengths
- MIT license, which the README says suits internal and commercial use
- Built on React, so it works with your existing components
- You own the data and can store it wherever you like
Trade-offs
- Requires React and coding to set up; it is not a finished no-code tool
- The README is truncated and does not detail every feature or limit
- Community support is described mainly through Discord and GitHub issues
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| puck (this) | 13.6k | Library | intermediate | 8 days ago | React developers adding a page builder to an existing app |
| mitosis | 14.5k | Dev tool | intermediate | 8 days ago | Teams maintaining the same UI components across more than one framework |
| react-grid-layout | 22.5k | Library | intermediate | 4 days ago | React developers building dashboards with movable panels |
| draggable | 18.5k | Library | intermediate | 11 months ago | Front-end developers who want full control over how drag and drop feels and behaves |
| dnd-kit | 17.8k | Library | intermediate | 6 days ago | Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app |
| interact.js | 12.9k | Library | intermediate | 3 months ago | Web developers building drag-and-drop interfaces |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.