Build a WYSIWYG Page Builder with GrapesJS

Click any element below, retype it in place, then change how it looks. Nothing here is a preview — the canvas is the page, and the style panel edits the same elements you are reading.

The stock editor: canvas, blocks, layer tree, style manager and device switcher, with nothing added.

WYSIWYG stands for “What You See Is What You Get.” A WYSIWYG editor lets users work with a visual representation of their content instead of editing raw HTML and CSS directly. The page they are looking at while they work is the page they will publish.

Users can see the page while they build it.

A rich text editor is the right tool for a paragraph. It formats text, handles headings and lists, and manages inline content. A page builder works one level up: on the sections, columns, components, images, buttons, styling and responsive behaviour that make up the page around that text.

GrapesJS combines visual page editing with an extensible component architecture — and it still contains a rich text editor, because editing a paragraph in place is half of what WYSIWYG means. If your product already uses CKEditor, TinyMCE, Froala or Quill, you can keep it: integrations for each are on GJS.Market.

The building blocks of a visual editing experience, all part of the GrapesJS core rather than something you assemble yourself.

The same visual editing engine sits underneath very different products. These are the shapes it takes most often.

Visual editing is usually requested by one team and built by another. These are the people on both ends of that conversation.

Out of the box the editor knows about text, images, buttons and sections. What makes it feel native to your application is teaching it about the objects your application already has.

1. 01
2. ↓02
3. ↓03
4. ↓Extend the editor with components that match the objects, content and workflows of your application.

The examples on the third rung are components you would build for your own product, not plugins available for download. GrapesJS gives you the component API; what the component knows about is up to you.

Preview and adjust your layouts across viewport sizes while working inside the visual editor, rather than publishing and checking on a phone.

Devices are configurable: the three above are the defaults, and you can define whichever breakpoints your design system actually uses. Styles set on a narrower device apply from that breakpoint down.

GrapesJS provides the visual editing layer. Everything around it — users, permissions, data, storage and publishing — stays inside the application you already run.

If the question is specifically how to mount the editor inside an existing product, that walkthrough has its own page. Embeddable page builder

Build the editor around your existing application architecture instead of moving your content into a separate hosted platform.

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() }),
  });
}

GJS.Market sells plugins; it does not host your editor, store your pages or run your database. The Storage Manager points at whatever endpoint you give it, behind your own authentication.

A visual editor looks like one feature and turns out to be a dozen subsystems, each of which has to work before any of it feels finished.

What a WYSIWYG editor is made of

• Canvas
• Selection
• Inline editing
• Drag & drop
• Components
• Blocks
• Styling
• Responsive controls
• Assets
• Undo & redo
• Storage
• Export
• Publishing
• Maintenance

This is a comparison of scope, not of schedule — how long an editor takes to build depends on your team and how much of it you actually need. Build your product, not another editor from scratch.

A blank canvas is the hardest thing to hand a non-technical user. Starting layouts give them something to change instead of something to invent.

These are the kinds of layout a builder's users ask for, not product listings. Ready-made starting points ship as presets on GJS.Market.

Everything below is a real listing on GJS.Market, with its live name and price. Each group also links its category, so there is always more than what fits here.

Rich text editing

Editing text where it sits is half of WYSIWYG. Swap the built-in editor for the one your product already uses.

Browse this category

Inline RTE

GrapesJS Inline Text Editor — Compatible with CKEditor 5

Replaces the built-in rich text editor with CKEditor 5, editing in place on the canvas.

$69.00View

Inline RTE

TinyMCE 8 Inline Text Editor

Brings TinyMCE 6 to the canvas for teams already standardized on it.

$69.00View

RTE toolbar

Grapesjs RTE Extensions

Extends the default toolbar with the formatting actions the stock one leaves out.

FreeView

Visual styling

Give the style panel better controls: colour pickers, real fonts and precise spacing.

Browse this category

Colour

Grapesjs Style Gpickr

A proper colour picker, including gradients, inside the style manager.

FreeView

Typography

Custom Fonts

Adds your own font families to the typography controls.

FreeView

Spacing

GrapesJS LayoutEnhancer: Precision Spacing Tool

Makes margin and padding adjustable by dragging on the canvas.

$49.00View

Blocks

Ready-made visual building blocks so the canvas is useful on day one.

Browse this category

Blocks

Plugin Basic Blocks

The starter set of blocks: columns, text, image, video, map.

FreeView

Blocks

Plugin Blocky for Tailwind CSS

Prebuilt sections for teams whose output has to be Tailwind.

$59.00View

Components

Specialized editable components, including elements reused across many pages.

Browse this category

Reusable

Symbols

Define an element once and reuse it, so one edit updates every instance.

FreeView

Assets

Additional media functionality — uploads, hosting and in-editor image editing.

Browse this category

Assets

Grapesjs Cloudinary

Points the asset manager at Cloudinary for uploads and transformations.

FreeView

Image editing

TOAST UI Image Editor

Crop, rotate and filter images without leaving the editor.

FreeView

Templates

Pre-built starting points so users never face an empty canvas.

Browse this category

Preset

Webpage Preset

A ready-made web-page configuration to start a project from.

FreeView

Templates

Templates Manager

Lets users save and reopen their own templates.

$39.00View

Storage

Somewhere to put the project data the editor produces.

Browse this category

Storage

Grapesjs Firebase Storage

Persists projects to Firebase when you would rather not build the endpoint.

FreeView

Pages

Multi-page projects, for when one canvas is not the whole site.

Browse this category

Pages

Pages Manager

Adds multi-page projects with a page list in the editor.

$25.00View

AI

AI-assisted generation inside the editor.

Browse this category

AI

Grapesjs GPT Plugin

Generates content for the selected component from a prompt.

FreeView

Four starting combinations, each aimed at a different kind of product. Every plugin listed is a real listing with its live price.

Prices come straight from the catalogue and can change; the product page is authoritative.

The core is one npm package and one container element. Everything after that is deciding how much of the editor your users should see.

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

// The visual canvas. Everything the user sees here is the page itself,
// not a preview of it.
const editor = grapesjs.init({
  container: '#editor',

  // The panels that make the editing visual rather than textual.
  styleManager: { appendTo: '#styles' },
  deviceManager: {
    devices: [
      { id: 'desktop', name: 'Desktop', width: '' },
      { id: 'tablet', name: 'Tablet', width: '768px' },
      { id: 'mobile', name: 'Mobile', width: '375px' },
    ],
  },
});

// "What you see is what you get" starts with editing text where it
// already sits. GrapesJS ships an inline rich-text editor, and you can
// replace it with whichever one your product already uses.
editor.setCustomRte({
  enable(el, rte) {
    el.contentEditable = true;
    return rte;
  },
  disable(el) {
    el.contentEditable = false;
  },
});

// A component decides what the user is allowed to change visually.
editor.DomComponents.addType('quote', {
  model: {
    defaults: {
      // Editable in place, but the frame around it stays yours.
      editable: true,
      droppable: false,
      traits: ['author', 'source'],
    },
  },
});

1. Add the components your product needs
2. →Customize the styles and the editor UI
3. →Configure storage against your own API
4. →Connect publishing to your pipeline
5. →Extend with plugins where it saves you time

That is the whole surface: initialize, extend, store, publish. The documentation covers each manager in depth.

The core is framework-agnostic; these pages cover mounting it inside a specific one.

Start with an open-source visual editing foundation and extend it around your product requirements.

Neighbouring pages for the questions this one only touches on.

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