Embed a Page Builder Directly Into Your SaaS

Explore embeddable plugins

Canvas
Blocks
Styles
Assets
Pages

Your API
The endpoints the editor talks to
- Projects
- Assets
- Users
- Permissions
Your database
Where the content actually lives
- PostgreSQL
- MySQL
- MongoDB
- Anything you already run
Your publishing infrastructure
How the finished page reaches the world
- Website
- CDN
- CMS
- Application

The editor lives inside your application — not in a separate platform.

Why embed

Why Embed a Page Builder?

Sending customers to an external builder costs you the session, the brand and the data. Embedding keeps all three.

Keep your UX

Your customers never leave your product. Editing is one more screen in the app they already know, not a hand-off to somewhere else.

Keep your branding

Panels, icons, typography and terminology are all yours to change, so the editor reads as a native part of your application.

Keep your data

Projects, assets and content are stored in your own infrastructure, under your retention, residency and backup rules.

Keep your backend

The editor calls the endpoints you already have. No parallel data model, no syncing between two sources of truth.

Keep your publishing workflow

Draft, review and publish stay in your pipeline. The editor produces content; your infrastructure decides when it goes live.

Keep full control

Open-source core, self-hosted, no seat pricing and no forced editor. Nothing about your roadmap depends on someone else's.

What gets embedded

Everything Your Users Need — Inside Your App

Some of this is GrapesJS core and works the moment the editor mounts. Some of it is a plugin. Some of it stays your application's job — each card says which.

Core

Visual canvas

Drag, drop, select and edit content directly inside your application. Part of the editor core — available as soon as you mount it.

Core + plugins

Blocks

Reusable sections and components. Define your own from your product's markup, or install a ready-made set.

Browse block plugins

Core

Style controls

Typography, spacing, colour and responsive breakpoints through the Style Manager. Restrict it to the properties your design system allows.

Core + plugins

Asset manager

Point the editor at your own media library, or connect a hosted one with an asset plugin.

Browse asset plugins

Core + plugins

Storage

Save projects to your API and database through the remote Storage Manager. Plugins add autosave, recovery and hosted backends.

Browse storage plugins

Core + plugins

Pages

Multiple pages per project. Core supports the page model; plugins add the management UI your users see.

Browse multi-page plugins

Your app

Publishing

Export HTML and CSS, then hand it to your own draft and publish pipeline. The editor never publishes on your behalf.

Your app

Permissions

Which users and roles can edit what is decided by your application, not the editor. Gate the route, then narrow the editor's panels to match the role.

How it works

Embed Your Editor in 5 Steps

1
01
Install
Add the editor to your existing frontend. One dependency, no service to sign up for, no key to provision.
2
02
Mount
Initialise GrapesJS on a container inside your own app shell. It renders where you put it and inherits the page around it.
GrapesJS with React Next.js page builder
3
03
Connect your storage
Point the remote Storage Manager at your own endpoints so every save lands in your database, authenticated by your session.
Storage
4
04
Add plugins
Install only what your product needs — blocks, pages, assets, export, AI — and register your own components as blocks.
Blocks Multi-page AI
5
05
Publish
Read the generated HTML and CSS out of the editor and push it through the draft, review and publish pipeline you already run.
GrapesJS plugins

Start with the editor core. Add only the functionality your product needs.

Quick start

Build Your First Embedded Editor

Five steps of real code. Framework-agnostic on purpose — the React and Next.js specifics are one link away.

Installation

npm install grapesjs

Initialization

editor.jsJS

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// Mount the editor on any container inside your own app shell.
const editor = grapesjs.init({
  container: '#editor',
  height: '100%',
  fromElement: false,
});

Storage

storage.jsJS

const editor = grapesjs.init({
  container: '#editor',

  // Persist to your API, not to a third-party service.
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
    options: {
      remote: {
        urlStore: '/api/projects/123',
        urlLoad: '/api/projects/123',
        // Your session, your authorization rules.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

Plugins & custom blocks

plugins.jsJS

import grapesjs from 'grapesjs';
import blocksBasic from 'grapesjs-blocks-basic';

const editor = grapesjs.init({
  container: '#editor',
  plugins: [blocksBasic],
  pluginsOpts: {
    [blocksBasic]: { flexGrid: true },
  },
});

// Or register your own product's components as blocks.
editor.Blocks.add('pricing-table', {
  label: 'Pricing table',
  category: 'Your product',
  content: '<section class="pricing">…</section>',
});

Publishing

publish.jsJS

// Publishing stays in your infrastructure.
async function publish(projectId) {
  const html = editor.getHtml();
  const css = editor.getCss();

  await fetch(`/api/projects/${projectId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, css, status: 'published' }),
  });
}

Ownership

Your Editor. Your Backend. Your Data.

Read the stack from top to bottom and note how much of it is already yours. GJS.Market supplies one layer.

Frontend

The framework you already use

React
Next.js
Vue
Angular
Vanilla JS

Embedded editor

GrapesJS plus the plugins you choose

Editor core
Blocks
Storage
Assets
Export

API
Your REST or GraphQL API
- Your auth
- Your validation
- Your rate limits
Database
Your database, your schema
- Your backups
- Your residency
- Your retention
Publishing
Your infrastructure
- Your domains
- Your CDN
- Your release process

GJS.Market provides the editor capabilities. You keep control of everything around them.

Plugin ecosystem

Extend Your Embedded Editor with Production-Ready Plugins

Every plugin below is a real listing on GJS.Market, with its live price. Install what your product needs and skip the rest.

Storage

Persist projects in your own backend.

Storage

Grapesjs Firebase Storage

Store editor projects in Firebase instead of writing a persistence layer.

Storage

Autosave & Restore — Crash Recovery for GrapesJS

Saves as your users work and restores the session after a crash or lost tab.

$12.00View plugin

Blocks

Add ready-to-use content sections.

Blocks

Plugin Blocky for Tailwind CSS

A production block library for teams whose design system is already Tailwind.

$59.00View plugin

Blocks

Plugin Basic Blocks

The essential layout and content blocks to make a fresh editor usable on day one.

Multi-page

Build complete multi-page websites.

Pages

Pages Manager

Gives users a real page list, so one project can become a whole site.

$25.00View plugin

Projects

Grapesjs Project Manager

Lets users keep several projects side by side inside your app.

White-label

Customize the editor experience.

White-label

Grapesjs Paneless

A reworked editor shell for teams who want the UI to stop looking like GrapesJS.

$299.99View plugin

Assets

Connect your media library.

Assets

Grapesjs Cloudinary

Serves and transforms editor media through Cloudinary.

Assets

Grapesjs Uppy

Adds a proper upload experience to the asset manager.

Export

Control how content is exported.

Export

Export Zip

Exports the finished HTML, CSS and assets as a downloadable archive.

AI

Add AI-powered editing capabilities.

Grapesjs GPT Plugin

Generates and rewrites page copy without leaving the canvas.

Integrations

Connect the editor with your existing stack.

Deploy

Grapesjs Netlify

Publishes straight to Netlify when that is where your output belongs.

Browse all embeddable plugins

Recommended stacks

Build the Stack Your Product Needs

Four starting points, assembled from listings that exist today. Prices are live from the catalogue.

SaaS page builder

Pages inside your dashboard

Build a SaaS page builder

Website builder

A full site-creation product

Build a website builder

Email builder

Campaigns and transactional mail

Build an email builder

CMS editor

Visual editing over structured content

Build a CMS editor

Prices come from the marketplace at build time and may change. Every plugin is optional — the editor core is free.

Use cases

Where Can You Embed GrapesJS?

The same editor core, pointed at a different job by the plugins and constraints you put around it.

SaaS platforms

Let customers create and edit pages inside your dashboard, without ever leaving the product they pay for.

SaaS page builder

CMS

Give content teams visual editing while your backend keeps the structured data it needs.

Headless CMS editor

CRM & marketing platforms

Allow users to build landing pages and campaign assets next to the audiences they already manage.

Landing page builder

Website builders

Ship a complete customer-facing site creation experience on top of an editor you did not have to write.

WYSIWYG page builder

Email platforms

Embed a visual email builder into the campaign workflow your users already follow.

Email template builder

AI website builders

Generate a first draft with AI, then let users refine it visually instead of re-prompting.

AI plugins

Internal tools

Give internal teams a visual editor for the surfaces they own, without building one from scratch.

No-code builder for developers

Headless platforms

Add a visual layer on top of the architecture you already committed to, rather than replacing it.

Open-source page builder

Framework support

Embed It Into the Stack You Already Use

GrapesJS runs in the browser and mounts on a DOM node, so the integration is a thin wrapper in whatever you already ship.

React

Build a visual editor directly into your React application.

View React page builder

Next.js

Embed the editor into a Next.js app, loaded on the client so it never touches SSR.

View Next.js guide

Vue

Mount the editor from a Vue component and manage it through the lifecycle hooks.

View Vue page builder

Angular

Initialise the editor from an Angular component and wire it to your services.

View Angular builder

Vanilla JavaScript

No framework at all — a script tag and a container element are enough.

View HTML drag & drop builder

Build vs. embed

What Building It Yourself Actually Means

A visual editor is not one feature. It is a dozen subsystems that all have to work together, and then keep working as browsers change.

Subsystems a homemade editor implies

Editor architecture
Canvas & iframe isolation
Drag & drop
Block system
Style manager
Layer tree
Undo / redo history
Storage & autosave
Asset manager
Multi-page model
Responsive editing
HTML / CSS export
Cross-browser testing
Ongoing maintenance

Build from scratch

Months of engineering

Every subsystem above is yours to design, build and test
The editor becomes a product your team maintains forever
Browser and framework upgrades are your problem
Roadmap capacity goes to editor plumbing, not your product

GrapesJS + GJS.Market

Start in days

Open-source editor core, already solved and battle-tested
Ready-made plugins for storage, blocks, pages, assets and export
Your own components registered as blocks
Your API, your data and your publishing workflow, unchanged

Same destination. One route spends your roadmap on editor infrastructure; the other spends it on your product.

Why GrapesJS

Why Use GrapesJS as Your Embedded Editor?

It was designed to be embedded — which is why the extension points you need are already there.

Open source

The core is released under the BSD-3-Clause licence — permissive, commercial-friendly, and readable when you need to know exactly what it does.

Self-hosted

The editor runs inside your own application infrastructure. There is no service to call and no uptime that is not already yours.

Extensible

Custom components, blocks, commands, panels and plugins are first-class. Your product's UI can become editable content.

Framework friendly

React, Next.js, Vue, Angular and vanilla JavaScript. The official @grapesjs/react wrapper is MIT licensed.

No vendor lock-in

Your application, your data and your infrastructure stay under your control. Output is plain HTML and CSS you can render anywhere.

Plugin ecosystem

Extend the editor with 100+ listings on GJS.Market instead of writing each capability yourself.

Explore GrapesJS

26k+

GitHub stars

100+

Plugins on GJS.Market

10 years

Active development

License fee, always

Make it yours

Make the Editor Feel Like Your Product

Branding
Custom UI
Custom components
Custom blocks
Permissions
User roles
Templates
Asset library
Publishing workflow
Custom APIs

Your users should feel like they're using your product — not a third-party editor.

Explore white-label page builder

FAQ

Embedding GrapesJS — Common Questions

Get started

Embed a Visual Editor Into Your Product

Start with the open-source GrapesJS editor and extend it with the plugins your product needs.

Browse GJS.Market plugins

Storage, blocks, pages, assets, export and AI — production-ready listings with live prices.