HTML Drag-and-Drop Builder Library — GrapesJS Ecosystem

Build your own editor with modern UX, full control, and clean HTML/CSS output.

Open source visual builder framework

Launch a polished HTML editor users actually enjoy

GrapesJS gives you full product-level control while GJS.Market accelerates delivery with battle-tested plugins, starter blocks, and presets. Build once, brand it as your own, and keep output clean for production.

Browse PluginsSee Builder Guide

Why teams choose this stack

22k+
GitHub Stars
100+
Plugins
MIT
License
10yrs+
In Production

Quick Start Workflow

1

Install and boot editor

Start with the official package or CDN build, then mount the editor in your app shell.

npm install grapesjs
2

Load starter blocks

Add a plugin pack for hero sections, forms, pricing, and CTAs so users can build quickly.

editor.BlockManager.add('hero', { ... })
3

Connect persistence

Wire StorageManager to your API so projects autosave and load per user/workspace.

storageManager: { type: 'remote' }
4

Ship with guardrails

Expose only allowed components/styles for your product to keep output clean and on-brand.

editor.on('load', () => { ... })

Decision Helper: Framework vs Hosted Builder

CriteriaGrapesJS + GJS.MarketTypical hosted builder
OwnershipFull code/data ownership in your stackVendor-owned runtime and storage
Customization depthComponents, commands, panels, storage, UIMostly theme/config level controls
Time to launchFast with plugins and presetsFast, but with platform limits
Long-term costInfrastructure + one-time plugin purchasesRecurring seats/usage pricing

Architecture Overview — How GrapesJS Models HTML & CSS

GrapesJS is structured around five core managers, each responsible for a distinct concern:

Components

Every HTML element on the canvas is a GrapesJS Component — a model with properties, traits, and event listeners. You define custom component types to control how specific elements are rendered and edited.

BlockManager

Blocks are the drag-and-drop units users pull onto the canvas. Each block defines an HTML snippet or component tree. The BlockManager categorises, renders, and manages blocks in the left panel.

StyleManager

The StyleManager exposes CSS properties as interactive UI controls. Sectors group related properties (typography, dimensions, backgrounds) and bind visually to the currently selected component.

StorageManager

Handles persistence of editor state. By default uses localStorage, but swappable for any REST API, database, or cloud storage backend via plugins.

AssetManager

Manages images, videos, and other media assets. Supports custom upload endpoints and asset library integrations.

Core API Highlights

Components API

Model every HTML element as a GrapesJS component. Define types, traits, and custom rendering logic. Components are the fundamental unit of the canvas.

Block Manager

Register drag-and-drop blocks that users can pull onto the canvas. Blocks can contain any HTML structure, component tree, or inline styles.

Style Manager

Expose CSS properties to end users through a visual panel. Group properties into sectors and bind them directly to selected components.

Code Example — Custom Block Definition

Adding a custom drag-and-drop block to GrapesJS takes just a few lines:

JavaScript
editor.BlockManager.add('my-block', {
  label: 'My Block',
  category: 'Basic',
  content: {
    type: 'text',
    content: 'Hello World',
    style: { padding: '10px', 'font-size': '16px' }
  },
  attributes: { class: 'fa fa-text-height' }
});

Plugin Categories on GJS.Market

Blocks

Pre-built drag-and-drop blocks: hero sections, pricing tables, feature grids, testimonials, and more.

RTE (Rich Text)

Replace the built-in rich text editor with Quill, Tiptap, or CKEditor integrations.

Storage

Persist editor content to REST APIs, localStorage, Supabase, Firebase, or any custom backend.

Export

Export clean HTML/CSS to files, the clipboard, a ZIP archive, or as an MJML template.

UI

Extend and restyle panels, add toolbars, modals, tooltips, and custom commands to the editor UI.

Use Cases

White-label builders

Embed a fully branded page editor inside your SaaS product. Remove all GrapesJS branding and add your own theme.

Headless CMS editors

Pair GrapesJS with Strapi, Contentful, or Directus as the visual editing layer for structured content.

Email editors

Use the GrapesJS MJML preset to build a responsive email designer outputting production-ready MJML.

Page editors

Build a full drag-and-drop landing page or website editor with templates, sections, and component libraries.

Featured Plugins

BlocksFree

Blocks Library Pro

Over 50 pre-built sections and content blocks

StylesFree

Style Manager Pro

Advanced CSS controls with visual property editors

StorageFree

Storage REST API

Connect GrapesJS to any REST backend for persistence

RTEFree

RTE Tiptap

Tiptap-powered rich text editor integration

ExportFree

Export ZIP

Export full project as a downloadable ZIP archive

UIFree

Custom Panels UI

Configurable panel layout and toolbar system

Installation

npm

Terminal
npm install grapesjs

CDN

HTML + JS
<!-- HTML -->
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" />
<script src="https://unpkg.com/grapesjs"></script>

<div id="gjs"></div>
<script>
  const editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    height: '100vh',
    storageManager: false,
  });
</script>

Related Guides

Drag-and-Drop Page BuilderAll GrapesJS PluginsGrapesJS Tutorial

Ready to build your HTML drag-and-drop editor?

Browse all plugins and starters on GJS.Market and ship in days, not months.

Explore plugins