Design and interface · Edition No. 16 · 10 Sep 2026

puckeditor/puck

A drag-and-drop page editor you drop into your own React app.

← Design and interfaceRead the whole edition →

13.3k stars · MIT · v0.23.0 (2026-08-07)

Visual editor built natively for React components.

Repo detailsthe review · specs · pros & cons · install

What it is

Puck is a visual editor for React. You register your own components with it, and the person editing composes a page from them; the output is a JSON structure that you store and render yourself.What it is good for. Anyone who keeps being asked to change wording and move sections on a landing page. It moves that job to the person who wants it changed. Because you register the components, they cannot break the design — they get your blocks, with the options you allowed. This is the key difference from a full CMS: Puck edits the layout of a page built from your code, and it does not own your content or your database. GrapesJS from Edition 6 and Onlook from Edition 12 solve nearby problems, and it is worth reading all three before choosing.

Stars13.3k
LicenceMIT
Latestv0.23.0 (2026-08-07)checked 7 Sep 2026
Written inTypeScript
Good
  • MIT, with the project stating it is fine for commercial use. No paid edition of the editor.
  • The editing person can only use blocks you defined, so the page cannot end up off-brand.
  • The output is plain JSON. You keep it wherever you already keep data, and rendering stays yours.
Watch for
  • It is a library, not an application. You supply the storage, the login and the page that hosts it.
  • It needs a React app. If your public site is Astro or plain HTML, this is not a small addition.
  • Still before version 1.0, and the npm package was renamed from @measured/puck to @puckeditor/core. Old tutorials will send you to the wrong package.
Install
npm i @puckeditor/core --save

Get the next edition in your inbox

A dozen repositories, opened and checked. The licence read, the last release dated, and the ones that did not make it named with the reason. It is the half most lists leave out.

No tracking pixels. One click to leave. The archive stays free either way.

We use your address to send the edition and nothing else. Confirm by email, leave in one click. How we handle it.