Won't I lose my React components?
No — GrapesJS renders React components inside blocks. You keep all existing code and wrap it in a GrapesJS block definition. The React Starter Kit on GJS.Market sets this up in under 30 minutes.
Craft.js → GrapesJS migration
GrapesJS — the Craft.js alternative teams pick when they outgrow React-only editors.
Framework-agnostic. 100+ plugins. Active v1.x maintenance. Built-in Style Manager, Device Preview, and Asset Manager — the features Craft.js makes you build yourself.
MIT license, zero vendor lock-in22k+ GitHub stars vs ~8kIn production since 2015
You’re here because…
Most teams find Craft.js because it has a clean React API. Most teams leave Craft.js for the same three reasons.
!
You spent two sprints rebuilding a style manager
GrapesJS ships a visual Style Manager out of the box — typography, spacing, borders, shadows, gradients. In Craft.js, you build that UI yourself, panel by panel.
!
Your team can't use Vue, Angular, or Svelte
Craft.js is React-only by design. GrapesJS is framework-agnostic — the same editor core works in React, Vue, Angular, or plain JavaScript. No rewrites required when your stack evolves.
!
Craft.js hasn't shipped a stable release in months
Craft.js is still at v0.x with infrequent maintenance. GrapesJS has an active v1.x track with TypeScript support and regular releases. For long-term products, maintenance velocity matters.
The numbers
22k+
GitHub Stars
100+
Marketplace Plugins
MIT
Open Source License
v1.x
Active maintenance
Live demos
Open in full screen →Try before you migrate
Free open-source baseline plus three production editors built on GrapesJS. Switch tabs to compare what shipped vs. what you would have built in Craft.js.
★shadcn/ui Editor is what most Craft.js migrators try first — it’s pre-selected below.
A production-grade editor with the shadcn/ui design system pre-wired in canvas. TypeScript, dark mode, accessible primitives — the way modern React apps look, without you building the editor UI from scratch.
grapesjsshadcn.netlify.appPremium
Like what you see?
Get the shadcn/ui Editor on GJS.Market →
The honest feature scoreboard
We’re not going to hide the one thing Craft.js gets right. But here is the full picture.
| Feature | GrapesJS | Craft.js |
|---|---|---|
| Ecosystem | ||
| License | ✓ MIT | ✓ MIT |
| Framework support | ✓ Any (React, Vue, Angular, Vanilla) | ✗ React only→ blocks Vue/Svelte/Angular teams |
| Plugin marketplace | ✓ GJS.Market (100+ plugins) | ✗ None→ every feature is DIY |
| Built-in tooling | ||
| Blocks manager | ✓ Drag-and-drop built in | ✗ Custom only→ 2-4 weeks of dev work |
| Style Manager | ✓ Visual CSS panel | ✗ Custom only→ build your own or go without |
| Device / responsive preview | ✓ Built in | ✗ Not included |
| Email builder (MJML) | ✓ Full support | ✗ Not supported |
| Maintenance & community | ||
| Active maintenance | ✓ v1.x actively released | ⚠ v0.x, infrequent releases→ long-term risk for new projects |
| TypeScript support | ✓ Full, since v1.x | ✓ Partial |
| GitHub stars | 22k+ | ~8k |
| Total score | 10/10 | 3/10 |
Migration timeline
One sprint is not marketing
From npm install to a running editor with storage — on a real project with 10-15 existing Craft.js components.
Same scope staying in Craft.js
Months of custom dev
for style/device/asset managers alone
- ●0:00
npm install grapesjs
Install GrapesJS + a preset (webpage or newsletter) in under a minute. No React wrapper required for your first run.
- ●0:15
Drag-and-drop editor is live
Default blocks, canvas, undo/redo, and component selection all work — zero config. This replaces 2-4 weeks of Craft.js boilerplate.
- ●0:30
Style + Device + Asset managers wired
Toggle them on in the config object. Visual CSS controls and responsive breakpoints come for free — no custom panels to build.
- ●0:45
Map your Craft.js components → GrapesJS blocks
Each Craft.js component becomes a GrapesJS block definition. Mechanical remapping — your business logic stays intact.
- ●1:00
Connect storage + roll out to first content type
Two endpoints: load project JSON, save project JSON. Ship one content surface first. Migrate the rest incrementally.
Questions every Craft.js team asks
How long does migration actually take?
Most teams finish in one sprint. The main work is remapping component types to GrapesJS blocks — not rewriting business logic. See the timeline below.
Is the bundle size bigger?
Core GrapesJS is ~300kb gzipped. With lazy loading it's loaded on demand and doesn't affect your page bundle. Craft.js is lighter out of the box but requires more plugin code to reach feature parity.
What about SSR and Next.js?
Wrap the editor in Next.js dynamic() with ssr: false — one line of code. GrapesJS is a browser-side editor by design, the same as Craft.js.
After migrating from Craft.js
“We moved from Craft.js to GrapesJS in two sprints. Lost zero functionality, gained the plugin marketplace and built-in Style Manager.”
“Craft.js required us to build our own block system, style controls, and device preview. GrapesJS had all three on day one.”
“The framework-agnostic architecture was the deciding factor. We were migrating from React to a mixed stack — Craft.js was simply not an option.”
Which one fits your situation?
Choose GrapesJS if
- ✓You need a framework-agnostic editor (React, Vue, Angular, or plain JS)
- ✓You want built-in Style Manager, Device Preview, and blocks without weeks of custom work
- ✓You plan to scale with a plugin ecosystem rather than building everything in-house
- ✓You want to ship visual editing in 30 minutes, not 30 days
Stick with Craft.js only if
- ·You've already shipped and have no plans to scale beyond React
- ·Your team has the capacity to maintain a fully custom editor infrastructure long-term
- ·You have no plans to support Vue, Angular, or framework-agnostic embeds
Free migration kit
Get the migration kitSend it to my inbox →Migrate from Craft.js in a weekend
Grab the Craft.js → GrapesJS schema mapper, a starter Next.js repo, and a checklist that has been used to migrate real production editors.
- Component schema mapping cheat-sheet (Craft.js → GrapesJS)
- Starter Next.js + GrapesJS repo with Style + Asset Manager
- Rollout checklist: feature flag, content batching, QA gates
Questions teams ask before they migrate
Comparing other builders?
Ready to ship
Open the builder and configure your first editor.
Pick a preset, add plugins, configure your blocks — and get a running GrapesJS editor in minutes, not sprints.
Not sure yet
Book a 15-min architecture call →Talk to someone who has migrated a real Craft.js app.
15 minutes, no pitch. We’ll sketch your migration path and tell you honestly if Craft.js is the better fit.