Build a production-ready page builder with open-source control.
Use GrapesJS as your visual editing engine, then compose your ideal workflow with plugins from GJS.Market. You keep full ownership of UX, infrastructure, and data while delivering a polished editor for non-technical users.
What your users get
- Visual editing with reusable blocks
- Consistent brand styling controls
- Faster publish cycles for content teams
- Reliable export to HTML and CSS
Why teams choose open source for visual editors
Ship a usable editor quickly
Start from open source core plus proven plugins instead of building drag and drop from scratch.
Keep full product control
Self-host and customize every panel, command, and storage behavior to match your workflow.
Scale without seat-based costs
Use MIT-licensed GrapesJS in commercial products and pay only for optional premium plugins.
Own your data pipeline
Store templates, pages, and revisions in your existing API and infrastructure.
Implementation plan your team can follow
Define your editor job
Landing pages, emails, templates, or full CMS content. Choose one first to avoid overbuilding.
Install GrapesJS core
Initialize with storage disabled first, then connect your API once UX is stable.
Add only essential plugins
Begin with blocks, forms, and export. Expand after your first users validate the workflow.
Map save and publish flow
Persist JSON and generated HTML/CSS so non-technical users can publish instantly.
Track usage and errors
Measure plugin adoption, failed commands, and publish latency to guide your roadmap.
Choose your best starting path
For product teams
Ship a branded page editor inside your SaaS app without vendor lock-in.
View React integration patternsFor marketing teams
Let non-technical users launch pages faster with reusable blocks and templates.
Explore drag-and-drop workflowsFor developers
Start from GrapesJS core and extend capabilities with focused plugins.
Browse plugin ecosystemDeveloper quick-start in 4 steps
Install the core package
Set up the base editor dependency for your app.
npm install grapesjsInitialize the editor canvas
Render a working visual canvas before customizations.
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100vh',
storageManager: false,
});Enable plugins from GJS.Market
Add features without bloating your core implementation.
import myPlugin from 'grapesjs-my-plugin';
const editor = grapesjs.init({
container: '#gjs',
plugins: [myPlugin],
pluginsOpts: { [myPlugin]: { option: true } },
});Connect save and publish actions
Turn the editor into a production publishing workflow.
editor.Commands.add('publish-page', {
run: async (editorInstance) => {
const html = editorInstance.getHtml();
const css = editorInstance.getCss();
await fetch('/api/pages/publish', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ html, css }),
});
},
});Recommended free plugins by outcome
GrapesJS Preset Webpage
Launch complete pages with starter blocks, panels, and styles.
Best for: Marketing pages
GrapesJS MJML
Create responsive email layouts with MJML-powered components.
Best for: Email campaigns
GrapesJS Blocks Basic
Add foundational content blocks to accelerate page creation.
Best for: Starter editors
GrapesJS Forms
Provide drag-and-drop form fields and form templates.
Best for: Lead capture
GrapesJS Tooltip
Improve editor UX with contextual onboarding and hints.
Best for: Onboarding UX
GrapesJS Export
Export HTML/CSS output to files, clipboard, or CI workflows.
Best for: Production handoff
GrapesJS vs other open-source builders
| Feature | GrapesJS | Webstudio | Silex | Webiny |
|---|---|---|---|---|
| License | MIT | AGPL-3.0 | GPL-3.0 | MIT (core) |
| Self-hosted | Yes | Yes | Yes | Yes |
| Plugin system | Full API | Limited | Limited | Partial |
| React support | Via wrapper | Native | No | Native |
| Email builder | Yes (MJML) | No | No | No |
| Active development | Yes | Yes | Maintenance | Yes |
Frequently asked questions
Related guides
Build your open-source editor stack today
Start with GrapesJS core, add focused plugins, and ship a visual editor your users can adopt quickly.
Browse GrapesJS Plugins