This guide focuses on the workflow teams actually need: initialize fast, ship reusable blocks, persist project data, and avoid common implementation mistakes.
Setup time
5-10 min
Core steps
4 steps
Code examples
Ready to paste
Install GrapesJS and render the editor in a container. Keep your first run intentionally minimal, then layer in custom modules.
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container: '#gjs',
height: '100vh',
width: 'auto',
storageManager: false,
plugins: [],
});Blocks are the primary UX for non-technical editors. Use clear labels and keep categories aligned with how users think about page sections.
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' },
});Move from browser-only data to remote storage once editing works locally. This unlocks collaborative and multi-device workflows.
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' },
},
});Step 01
Set up GrapesJS with a minimal config and make sure the canvas renders correctly inside your app shell.
Step 02
Create a focused starter set: hero, features, pricing, CTA, and footer. Keep labels clear for non-technical users.
Step 03
Save project JSON remotely so users can continue editing across sessions, browsers, and devices.
Step 04
Limit unsafe components, track editor events, and test export fidelity on mobile and desktop breakpoints.
Use project data (JSON) when possible. It preserves editor structure and avoids losing component metadata.
Define typography, spacing, and color tokens early so teams build consistent pages faster.
Start with a small, opinionated block set. Large block lists increase cognitive load and reduce adoption.
Track block usage, publish actions, and failures. Event data helps prioritize the right product improvements.
Manages draggable blocks. Add blocks with BlockManager.add() or the blocks init option.
Manages component types. Define custom components with ComponentManager.addType().
Visual CSS editor panel. Configure sectors and properties to control what styles editors can change.
Handles saving and loading editor content. Supports local, remote, and custom storage backends.
The iframe editing area where components are dragged and dropped. Fully isolated from your app styles.
Plugins are functions that receive the editor instance and can modify any editor manager.
Move faster with ready-made plugins for components, storage, forms, and advanced editor controls.
Browse plugins