Build a Drag-and-Drop Page Builder with GrapesJS

Drag a block from the palette into the canvas — or tap a block, then tap the canvas. Edit the text in place, adjust spacing and radius, and switch the viewport to see the layout adapt. This is a model of the interaction; the real GrapesJS editor is one section below.

The stock GrapesJS demo: block palette on the right, canvas in the middle, style manager and layer tree. Everything you see here is in the open-source core.

Six subsystems that ship with the core, and that your users experience as one gesture.

GrapesJS is a self-hosted, open-source editor framework rather than a hosted builder product. That distinction is the whole reason it fits inside someone else's application.

The same editor core underneath, configured for a different job each time.

Different reasons for wanting one, same problem underneath: page creation should not require a developer every time.

A page builder is not one feature. It is a dozen subsystems that all have to agree with each other — and then keep agreeing as the product grows.

Build your product — not another page builder from scratch.

Neither column is free of work. The difference is which work is yours.

Publishing stays in your column on purpose: it is the part that has to match your domains, your CDN and your release process.

GrapesJS is a layer inside your application, not a platform you hand your users over to. Your app keeps the users, the content and the publishing decision.

For the mechanics of mounting the editor inside an existing app — iframes, routing, auth handoff — see the embeddable page builder guide

The editor's Device Manager switches the canvas between breakpoints, and styles set while a device is active apply only at that width.

Let users adapt layouts, spacing, typography and visibility for different screen sizes. How a published page renders on a given device still depends on the markup and CSS you ship — the editor controls the rules, not the browser.

A block is a starting point a user drags in. These are the section types most page builders need on day one — build them yourself against the Block Manager API, or install a block plugin and start from a full palette.

• Hero

  Headline, supporting line and a primary action.

• Header

  Logo and navigation, collapsing to a menu on small screens.

• Features

  A column set for benefits, with icon, title and copy.

• Pricing

  Plan cards with one highlighted as the recommended tier.

• Testimonials

  Quotes with an attribution and avatar.

• Gallery

  An image grid filled from the Asset Manager.

• CTA

  A single, centred call to action.

• Contact

  A form wired to whatever endpoint you choose.

• Footer

  Link columns, legal text and secondary navigation.

This is the distinction that decides whether GrapesJS is a website-builder toy or an editor core you can build a product on.

1. Block
2. ↓Component
3. ↓Custom Component
4. ↓Your Product

Because custom components are backed by your own code, a GrapesJS editor can edit things a generic website builder has no concept of — a pricing table wired to your plans, a product grid reading your catalogue, a form posting to your API.

Most users do not want an empty page. Ship a set of starting layouts and let them save their own — presets configure the whole editor, templates give users a page to begin from.

These are layout categories, not catalogue listings — what you would build or curate for your own users. The presets and template managers you can actually install are in the plugin section below.

The Storage Manager is a client of your API, not a service. Point it at your endpoints and the editor loads and saves through them.

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

  // Each page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}

Connect GrapesJS to your own backend and decide how projects, pages, assets and users are stored. GJS.Market sells plugins — it does not host your data.

Every card below is a real listing — names, prices and thumbnails render live from the catalogue, so nothing on this page can drift from what is actually for sale.

Blocks

Extend the block library users drag from.

Browse this category

Blocks

Plugin Basic Blocks

The starter set of layout primitives — columns, text, images, links — so the palette is not empty on day one.

FreeView plugin

Blocks

Plugin Blocky for Tailwind CSS

A Tailwind-based block library, for teams whose design system already speaks utility classes.

$59.00View plugin

Drag & drop UX

Make the gesture itself clearer and more precise.

Browse this category

Drag & drop

Placeholder 2.0 - Premium Drag Experience

A clearer drop indicator, so users can see exactly where a block will land before they release it.

$99.00View plugin

Spacing

GrapesJS LayoutEnhancer: Precision Spacing Tool

Drag-to-adjust margin and padding handles, so spacing is set on the canvas instead of in a number field.

$49.00View plugin

Templates

Give users ready-made starting points.

Browse this category

Preset

Webpage Preset

A ready-made web-page editor configuration — blocks, panels and styling wired together.

FreeView plugin

Templates

Templates Manager

Lets users start from a saved template instead of a blank canvas, and save their own.

$39.00View plugin

Reusable components

Build sections once and reuse them across pages.

Browse this category

Reusable

Symbols

Turns a section into a symbol reused across pages — edit it once and every instance follows.

FreeView plugin

Responsive

Manage breakpoints and per-device styling.

Browse this category

Responsive

Responsive Pack — Breakpoint Manager for GrapesJS

Adds and manages breakpoints so users can restyle a layout per screen size.

$14.00View plugin

Assets

Extend media management and uploads.

Browse this category

Assets

Grapesjs Cloudinary

Points the Asset Manager at Cloudinary, so uploads land in a real media pipeline.

FreeView plugin

Uploads

Grapesjs Uppy

Uppy-powered uploading — drag files in, with progress and resumable transfers.

FreeView plugin

Storage

Extend project persistence and recovery.

Browse this category

Storage

Grapesjs Firebase Storage

Persists projects to Firebase when you would rather not build a storage endpoint first.

FreeView plugin

Autosave

Autosave & Restore — Crash Recovery for GrapesJS

Keeps a recoverable copy of work in progress, so a closed tab does not cost the user their page.

$12.00View plugin

Pages

Multi-page projects inside one editor session.

Browse this category

Pages

Pages Manager

Multi-page projects in one editor session, with a page list users can navigate.

$25.00View plugin

Export

Add output formats beyond the built-in HTML and CSS.

Browse this category

Export

Export Zip

Exports the finished page as a downloadable HTML and CSS bundle.

FreeView plugin

SEO & accessibility

Audit pages before they go live.

Browse this category

SEO & a11y

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

Audits the page inside the editor and flags accessibility and SEO problems before publishing.

FreeView plugin

AI

Add AI-assisted authoring on the canvas.

Browse this category

AI

Grapesjs GPT Plugin

Generates and rewrites content on the canvas through an OpenAI-backed command.

FreeView plugin

Four starting configurations. Each is a real basket of listings, not a bundle SKU — install what you need and drop the rest.

Prices render live from the catalogue.

Two files and you have an editor on screen. Everything after that is configuration.

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

// The editor core. Mount it on any container in your app.
const editor = grapesjs.init({
  container: '#editor',
});

// A block is what the user drags. A component is what it becomes
// on the canvas once dropped — and what your app can then control.
editor.BlockManager.add('pricing-table', {
  label: 'Pricing',
  category: 'Sections',
  content: { type: 'pricing-table' },
});

editor.DomComponents.addType('pricing-table', {
  model: {
    defaults: {
      // Lock the frame, let the user edit only what you allow.
      draggable: 'main, section',
      traits: ['plan', 'currency'],
    },
  },
});

1. Add blocks
2. →Customize components
3. →Configure storage
4. →Connect your backend
5. →Publish

From here the work is product-specific: which blocks your users get, which component types you register, and where projects are stored.

The core is framework-agnostic — it mounts on a DOM container. These pages cover the wiring for each.

Only characteristics that can be checked against each project's published package and documentation. Capabilities differ by design goal — Craft.js is headless by intent, Puck is React-first, Builder.io is a hosted platform.

Licences verified against the npm registry on 2026-09-03: grapesjs 0.23.6 publishes as BSD-3-Clause; @measured/puck, @craftjs/core and @builder.io/react publish as MIT. Capabilities reflect each project's public documentation — check them before making a decision.

Same editor core, different question. If one of these matches your situation more precisely, start there.

Start with GrapesJS, customize the editing experience and extend it with the plugins your product needs.