GrapesJS is an open-source HTML editor framework with a rich plugin system. This tutorial covers everything you need to build a working GrapesJS editor: installation, initialization, custom blocks, storage configuration, and event handling. Browse GJS.Market to find plugins that extend the editor without writing everything from scratch.
Browse plugins →Step 1 — Installation and initialization
Install GrapesJS via npm and initialize it with a container element. The minimum configuration requires only a container selector. GrapesJS renders the full editor UI inside that element.
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container: '#gjs',
height: '100vh',
width: 'auto',
storageManager: false,
plugins: [],
});Step 2 — Adding custom blocks
Blocks are the draggable elements users add to their pages. Each block has a label, category, and content (HTML string or component definition). Blocks appear in the block manager panel.
editor.BlockManager.add('hero-section', {
label: 'Hero Section',
category: 'Sections',
content: `
<section style="padding: 80px 20px; text-align: center;">
<h1>Your Headline Here</h1>
<p>Add your subheadline and CTA below.</p>
<a href="#" style="background: #4f46e5; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none;">
Get Started
</a>
</section>
`,
attributes: { class: 'fa fa-columns' },
});Step 3 — Configuring storage
GrapesJS supports local storage (browser), remote storage (your API), and custom storage adapters. Use the remote storage type to save and load from your backend.
const editor = grapesjs.init({
container: '#gjs',
storageManager: {
type: 'remote',
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
urlLoad: '/api/pages/load',
urlStore: '/api/pages/save',
headers: { Authorization: 'Bearer YOUR_TOKEN' },
},
});Key GrapesJS concepts
Block Manager
Manages draggable blocks. Add blocks with BlockManager.add() or the blocks init option.
Component Manager
Manages component types. Define custom components with ComponentManager.addType().
Style Manager
Visual CSS editor panel. Configure sectors and properties to control what styles editors can change.
Storage Manager
Handles saving and loading editor content. Supports local, remote, and custom storage backends.
Canvas
The iframe editing area where components are dragged and dropped. Fully isolated from your app styles.
Plugin API
Plugins are functions that receive the editor instance and can modify any editor manager.
GrapesJS tutorial FAQ
Extend GrapesJS with plugins
Skip the boilerplate — browse 100+ ready-to-use plugins on GJS.Market.
Browse plugins →