AI tools, scored for your job
Get paid to train AI
🤝 You're in the Free & Open Source library — community-built tools you can use without paying. A different concept from our scored AI directory.
Home › Free & Open Source › Software › Puck
✦ Free & open sourceSoftware

Puck

Modular visual editor for React: drag-and-drop page editing built from your own components.

A visual editor for your React app

MIT-licensed, installed from npm, with no vendor lock-in on your data.

Free forever · open source · MIT
✓ Light setup✓ Browser-based✓ Real-time collaboration
7.8
ZEKAI
Embeddable React page editor
Free & open source · Software
Ease of setup6
Usefulness7
Maintenance9.5
Community8.5
★ 13,700
GITHUB
Nov 2026
UPDATED
MIT
LICENSE
🛠 Don't want to self-host? We can set it up →
⚡ Quick answer

Puck is a React component that gives your editors a drag-and-drop page builder using components you define. It suits developers building a CMS or marketing-page tool inside their own product.

Runs on
Web
Hosting
Self-host
Languages
TypeScript
License
MIT

What it is

You install @puckeditor/core, describe your components and their fields in a config, and render the Puck editor and a Render component in your app. It works in React environments including Next.js, and you decide where the page data is saved.

Who it's for

It suits React and Next.js teams who want editors to assemble pages from an approved component set. It does not suit non-developers, because there is no hosted designer: you must write the config and wire up storage.

Key features

Your own components

Editors drag in components you define in a config.

Field types per component

Declare text and other fields that appear in the editor sidebar.

Plain data output

Page data is yours to save in any database.

Next.js friendly

Works in React environments including Next.js.

Starter command

npx create-puck-app scaffolds a new project.

How to start

Up and running in 3 steps

1
Run npm i @puckeditor/core --save, or npx create-puck-app my-app.
2
Write a config object listing your components and their fields.
3
Render the Puck editor with your config, save the data, and render pages with the Render component.
Real talk

Our honest verdict

What's great

  • MIT licence makes it usable in internal and commercial products.
  • You keep the data and the component design system.
  • A single React component, so it fits existing apps.
  • Demo and docs are linked from the README.

Where it falls short

  • It needs React development work; there is no no-code mode.
  • You must build saving, hosting and publishing yourself.
  • There is no AI generation in the README.
Cost

Pricing & license

Puck is free under the MIT licence. Its README shows no paid plan, so the cost is developer time and wherever you store pages.

Paid work

Open remote AI-training roles

768 open remote AI-training roles, updated November 14, 2026; most pay $20–$175 an hour. Zekai lists them free; the application goes to the employer’s platform.

See all open roles →
Compare

Alternatives

🎁 Free & open-source alternatives

These reviewed AI tools do the same job instantly — from our scored directory.

Get more

Use it, or have us set it up

📄 Free PDF: Puck for Software
A plain-language guide to getting your first result. Sent to your inbox.
🔔 64 people want a full video tutorial — add your vote
🛠 Don't want to set it up yourself?
We'll install, host & configure Puck for you — and train your team.
Get it done for you ↗
Questions

FAQ

Is Puck free for commercial use?

The README says it is MIT licensed, suitable for internal systems and commercial applications.

Does it need Next.js?

No; it works in React.js environments, including Next.js.

Where is page data stored?

You choose; the README example saves it through your own function.

Radar

Latest AI news

✉️ The weekly free toolkit
The best new free & open-source tools for Software — one short email a week, in your language.
Free · 1 email/week · unsubscribe anytime
Get paid to train AI →

See Zekai first in Google