AI tools, scored for your job
Get paid to train AI
🤝 You're in the Free & Open Source library — community-built tools you can use without paying. A different concept from our scored AI directory.
Home › Free & Open Source › Software › GrapesJS
✦ Free & open sourceSoftware

GrapesJS

A JavaScript framework for embedding a drag-and-drop web page and email template builder inside your own product.

Embed a drag-and-drop page builder in your app

A builder framework for HTML templates, newsletters and CMS editors, with plugins and HTML and CSS export.

Free forever · open source · BSD-3-Clause
✓ Needs IT✓ Browser-based✓ Real-time collaboration
7.7
ZEKAI
Build-your-own page editor
Free & open source · Software
Ease of setup5
Usefulness7
Maintenance9.5
Community9.2
★ 26,403
GITHUB
Nov 2026
UPDATED
BSD-3-Clause
LICENSE
🛠 Don't want to self-host? We can set it up →
⚡ Quick answer

GrapesJS is a front-end framework that developers drop into a CMS or product to give users a visual template editor. It is a toolkit to build with, not a ready-made website builder for end users.

Runs on
Web
Hosting
Self-host
Languages
TypeScript
License
BSD-3-Clause

What it is

You call grapesjs.init() on a container and get blocks, a style manager, a layer manager, a code viewer and an asset manager, with local and remote storage. It targets HTML templates for sites, newsletters and mobile apps, and extends through official and community plugins and a React wrapper.

Who it's for

It suits front-end developers building a landing page, email or document editor into a SaaS or CMS. It does not suit non-developers who want to build a site today; you must wire up storage, assets and the surrounding product yourself.

Key features

Block manager

Drag prebuilt components onto the canvas, with basic blocks, forms and navbar available as plugins.

Style manager

Edit CSS visually for the selected component.

Layer and code views

Inspect the component tree and view the generated HTML and CSS.

Asset manager

Handle images and files, with plugins such as a Filestack uploader.

Storage options

Local and remote storage for saving templates.

Plugins and React wrapper

Official and community plugins, plus @grapesjs/react and a WebMCP extension for browser AI agents.

How to start

Up and running in 3 steps

1
Install with npm i grapesjs, or load grapes.min.js and grapes.min.css from unpkg or cdnjs.
2
Add a container div and call grapesjs.init({ container: '#gjs', components: '...', style: '...' }).
3
Add blocks and plugins you need (basic blocks, forms, export), and configure storage to save templates to your backend.
Real talk

Our honest verdict

What's great

  • Designed to live inside a CMS, so the editor becomes part of your product with your own branding and storage.
  • Installs from npm, unpkg or cdnjs, and starts with a few lines of grapesjs.init().
  • BSD-3-Clause is permissive: you can embed it in commercial products as long as you keep the notice.
  • A large plugin set covers forms, navbars, countdowns, image editing and export to ZIP.

Where it falls short

  • It is a framework: you build the surrounding application, user accounts, hosting and backend storage yourself.
  • The polished editor UI, Studio plugins and core-team support are sold separately as the Studio SDK, and I found no price on the page I read.
  • Output quality depends on the components and CSS you provide; the editor does not design pages for you.
  • Needs JavaScript skills to configure, extend and keep up to date across version changes.
Cost

Pricing & license

The GrapesJS core is BSD-3-Clause and costs nothing beyond your development and hosting time. The Studio SDK is a commercial product with a free plan mentioned on grapesjs.com, but I saw no prices on the pages I read.

Paid work

Open remote AI-training roles

767 open remote AI-training roles, updated November 14, 2026; most pay $20–$175 an hour. Zekai lists them free; the application goes to the employer’s platform.

See all open roles →
Compare

Alternatives

These reviewed AI tools do the same job instantly — from our scored directory.

Get more

Use it, or have us set it up

📄 Free PDF: GrapesJS for Software
A plain-language guide to getting your first result. Sent to your inbox.
🔔 64 people want a full video tutorial — add your vote
🛠 Don't want to set it up yourself?
We'll install, host & configure GrapesJS for you — and train your team.
Get it done for you ↗
Questions

FAQ

Is GrapesJS a website builder I can use directly?

No. The README calls it a Web Builder Framework meant to be used inside a CMS or product, with demos for a web page and a newsletter editor.

What is the Studio SDK?

A commercial layer on top of GrapesJS that offers a ready-made embeddable editor UI, plugins and support from the core team, per the README and grapesjs.com.

What licence is the core under?

BSD-3-Clause, per the core package's LICENSE file.

Radar

Latest AI news

✉️ The weekly free toolkit
The best new free & open-source tools for Software — one short email a week, in your language.
Free · 1 email/week · unsubscribe anytime
Get paid to train AI →

See Zekai first in Google