Puck vs Craft.js: an editor you configure or an editor you write

The same idea, two levels of abstraction

Both libraries agree on the important thing: in a React product, the units a user arranges should be your React components, not HTML nodes. That agreement rules both of them out for the same set of jobs — non-React stacks, email output, free-form styling — and puts them in direct competition for the rest.

Puck implements the idea as a product: a config object describes your components, and an editor is generated. Craft.js implements it as a toolkit: hooks connect your components to a node tree, and the editor is yours to write.

Where Puck wins

You get an editor today. Palette, canvas, fields sidebar, publish flow. In Craft.js all four are your code, and our benchmark screenshots show the difference starkly: Puck renders an editor, Craft.js renders a draggable heading.

The config API is small and typed. Adding an editable component is a declaration, and TypeScript catches field mistakes at compile time.

Documentation is task-shaped and current. Next.js App Router, custom fields and external data are covered with runnable examples.

Active development. Faster-moving than Craft.js, with a visible roadmap.

Publishing and data flow are solved. onPublish hands you typed JSON; you decide where it goes.

Where Craft.js wins

No interface to fight. If your product's editor must look like your product, starting from nothing is faster than overriding someone else's.

A third of the bundle. 29.2 kB against 90.4 kB. On an in-app composer that users hit constantly, that is worth having; on a dedicated editor route it rarely decides anything.

More control over interaction. Drop rules, custom drag behaviour and tree manipulation are directly available rather than mediated by a config schema.

A smaller conceptual surface. Two hooks against a config schema with field types, overrides and plugins.

Faster first render, 94 ms against 852 ms in our benchmark, because it puts almost nothing on screen.

The honest cost comparison

Puck's cost is accepting its opinions. You will spend some time working around the editor's layout rather than building your own, and if your requirements diverge far enough from its model, you end up fighting it — the classic framework trade.

Craft.js's cost is the 120 hours our calculator attaches to building an editor interface, plus the settings forms, the layer tree and the toolbar. That work is not hard; there is simply a lot of it, and it is not the work your product is judged on unless the editor is your product.

Migration

Both store a JSON tree keyed by component names, so migration is more tractable than most pairings here — a transformer between the two shapes is realistic, and your components need not change.

The editor code does not migrate: Puck's config and Craft.js's connectors are unrelated APIs. Budget for rewriting the editor layer while keeping the components and, with effort, the content.

Verdict

Default to Puck. It is the faster route to a working editor for a React product, the API is smaller than it looks, and the interface is good enough that most teams stop wanting to replace it.

Choose Craft.js deliberately, when you can name the reason the supplied interface will not do. "We want more control" is not a reason; "our editor lives inside a canvas-based app and must share its interaction model" is.

If the answer to either is that the editor must leave React, GrapesJS vs Puck is the comparison to read instead.

Decision checklist

1. Can we name a specific reason the supplied interface will not work? "We want control" is not one; "our editor must share the interaction model of our canvas app" is.
2. How many engineering weeks can we spend before a customer sees this? Craft.js needs several more than Puck.
3. Is the editor on a route users open constantly, or a dedicated editing page? Only the first makes the 61 kB difference matter.
4. Do we need custom drag behaviour or unusual drop rules? That is where Craft.js's lower-level API pays for itself.
5. Who maintains the editor UI when the original author leaves? With Puck that is the maintainers; with Craft.js it is whoever inherits your code.

The number that matters

120 hours — our estimate for building an editor interface, and the line item Puck removes entirely. Craft.js's 61 kB saving is real, and it costs three engineering weeks. Make that trade deliberately, because it is not obvious from a bundle-size table.