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

*Source: https://www.editorstack.cc/compare/puck-vs-craftjs — last updated 2026-08-19. Licensed CC BY 4.0 with attribution to EditorStack.*

## Summary

- Puck and Craft.js share a premise — your React components are the editable units — and differ completely on how much of the editor you write.
- Our measurements put Puck at 90.4 kB gzip and Craft.js at 29.2 kB; the 61 kB difference is roughly the editor interface Puck includes.
- Puck reached a working editor in 16 lines in our benchmark and Craft.js in 21, but the 21 lines are mostly your own components, which is the point of the library.

## At a glance

| Product | Type | Licence | Frameworks | Bundle (min+gzip) | Price from | Self-hosted | White label | Score |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [Puck](https://www.editorstack.cc/libraries/puck) | library | MIT | React | 90.4 kB gzip | Free (open source) | Yes | Yes | 8 |
| [Craft.js](https://www.editorstack.cc/libraries/craftjs) | library | MIT | React | 29.2 kB gzip | Free (open source) | Yes | Yes | 6.6 |

## 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](/research/time-to-first-editor-benchmark) 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](/use-cases/build-vs-buy-visual-editor) 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](/compare/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.


## Frequently asked questions

### Which is better for a React page builder?

Puck, for most teams: it gives you an editor immediately and its config API is small. Craft.js is better when the editor interface must be yours, which usually means the editing experience is a product differentiator.

### Can I customise Puck's interface?

Yes, through overrides for editor chrome and custom field types, but you are shaping a supplied interface. With Craft.js there is no supplied interface to shape.

### Which has more momentum?

Puck. It is newer, released in June 2023, and moving faster; Craft.js releases are infrequent, which is either stability or stagnation depending on your risk appetite.