GrapesJS is the leading open-source JavaScript library for building HTML drag-and-drop editors. Unlike hosted page builder products, GrapesJS is a framework you embed inside your own application. It outputs clean, semantic HTML and CSS — and every aspect of its behaviour can be customised through a comprehensive plugin API. GJS.Market provides the plugins, presets, and components that make it production-ready in record time.
Browse Plugins →Architecture Overview — How GrapesJS Models HTML & CSS
GrapesJS is structured around five core managers, each responsible for a distinct concern:
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.
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.
The StyleManager exposes CSS properties as interactive UI controls. Sectors group related properties (typography, dimensions, backgrounds) and bind visually to the currently selected component.
Handles persistence of editor state. By default uses localStorage, but swappable for any REST API, database, or cloud storage backend via plugins.
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:
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
Blocks Library Pro
Over 50 pre-built sections and content blocks
Style Manager Pro
Advanced CSS controls with visual property editors
Storage REST API
Connect GrapesJS to any REST backend for persistence
RTE Tiptap
Tiptap-powered rich text editor integration
Export ZIP
Export full project as a downloadable ZIP archive
Custom Panels UI
Configurable panel layout and toolbar system
Installation
npm
npm install grapesjsCDN
<!-- 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>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 →