# GrapesJS vs Craft.js: a finished engine or a toolkit to build one

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

## Summary

- GrapesJS ships an editor; Craft.js ships the parts you build one from, which is why our measurements put them ten times apart in bundle size — 294.6 kB gzip against 29.2 kB.
- Craft.js only exists inside React and only edits React components; GrapesJS runs in any stack and edits HTML, so the choice is usually settled by where the editor has to live rather than by preference.
- If you are going to replace the editor UI anyway, Craft.js means you are not shipping 265 kB of UI you throw away — but you are committing to build panels, toolbars and settings forms from scratch.

## At a glance

| Product | Type | Licence | Frameworks | Bundle (min+gzip) | Price from | Self-hosted | White label | Score |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [GrapesJS](https://www.editorstack.cc/libraries/grapesjs) | library | BSD-3-Clause | Any (framework-agnostic) | 294.6 kB gzip | Free (open source) | Yes | Yes | 7.5 |
| [Craft.js](https://www.editorstack.cc/libraries/craftjs) | library | MIT | React | 29.2 kB gzip | Free (open source) | Yes | Yes | 6.6 |

## The deciding question

Are you going to keep the editor interface you are given?

If yes, GrapesJS is the shorter road: panels, layers, a style manager and a device switcher exist on
install, and your work is restyling them. If no — because your product has a strong visual identity,
or because the editor is narrow and opinionated — then GrapesJS's interface is 265 kB of code you
will spend weeks overriding and then ship anyway.

Craft.js is the answer for the second case. It gives you the part that is genuinely hard to build —
a node tree with drag-and-drop, drop rules, selection and serialisation — and nothing you would throw
away.

## Where GrapesJS wins

**It works outside React.** Craft.js is React-only at the level of its architecture, not its
packaging. If the editor might one day need to run in a Vue admin panel or be resold to customers on
another stack, that decision is made now.

**It edits HTML, so the output is portable.** Craft.js serialises a tree of your React components,
which means nothing outside your application. GrapesJS gives you markup you can render in an email,
a static site or a PHP template.

**Style control for end users.** GrapesJS's style manager lets users change padding, colour and
typography, producing CSS. In Craft.js, users change props you decided to expose, and building a
styling system on top is your project.

**Responsive editing is included.** Device switching and breakpoint-aware styles ship with GrapesJS.

**A decade of plugins.** Uneven in quality, but the surface of already-solved problems is much larger
than Craft.js's, which is close to empty.

## Where Craft.js wins

**The editor looks like your product.** No panels to restyle, no specificity war with a vendor
stylesheet, no compromise between two design languages.

**A tenth of the bundle.** 29.2 kB against 294.6 kB. On a route users open constantly — an in-app
composer rather than a separate editor page — that difference is worth having.

**A far smaller API surface.** Two hooks and a rules object against seven managers. Onboarding a new
engineer onto a Craft.js codebase is an afternoon.

**Your components are the canvas.** Craft.js edits real React components with their real props, so
there is no translation layer between what the editor shows and what production renders — the same
advantage [Puck](/libraries/puck) has, without Puck's opinions about the interface.

**Faster to first paint**, at 94 ms against 309 ms in our
[benchmark](/research/time-to-first-editor-benchmark), because it renders almost nothing.

## Migration between them

There is no sensible migration path, in either direction, and this is one of the clearer cases in
the dataset.

GrapesJS stores HTML; Craft.js stores a JSON tree keyed by React component names. Converting HTML
into component instances requires a parser plus a mapping that only exists if the HTML was generated
from a constrained block set. Converting the other way means rendering components to HTML and losing
every editable structure.

Treat the choice as a one-way door for existing content, and make it on the basis of where the editor
must run and who is building the UI.

## Verdict

Choose GrapesJS when the editor must work outside React, when the output must be portable HTML, or
when you want an editor to restyle rather than an editor to build. Choose Craft.js when the editing
experience is a differentiator, the product is React, and you have the engineering time to spend on
UI — because with Craft.js, that time is not optional.

Two adjacent comparisons are usually worth reading before deciding:
[GrapesJS vs Puck](/compare/grapesjs-vs-puck) if the React question is live, and
[Puck vs Craft.js](/compare/puck-vs-craftjs) if you have already ruled GrapesJS out.


## Frequently asked questions

### Is Craft.js lighter than GrapesJS?

Substantially. We measured @craftjs/core 0.2.12 at 29.2 kB gzip and grapesjs 0.23.6 at 294.6 kB. The difference is roughly the weight of the editor interface, which GrapesJS includes and Craft.js does not.

### Can Craft.js do everything GrapesJS does?

No. Craft.js has no style manager, no responsive breakpoint switching, no asset manager and no HTML output — those are features of GrapesJS, not layers you configure in Craft.js. You would be building them.

### Which is faster to a working editor?

GrapesJS, for a demo: 14 lines against 21 in our benchmark, with panels included. Craft.js is faster to first render (94 ms against 309 ms) precisely because it renders no editor chrome.