Baue einen Drag-and-drop-Page-Builder mit GrapesJS

Zieh einen Block aus der Palette auf die Arbeitsfläche – oder tippe erst den Block an, dann die Fläche. Bearbeite den Text direkt, verändere Abstand und Radius und wechsle den Viewport, um zu sehen, wie sich das Layout anpasst. Das hier ist ein Modell der Interaktion; der echte GrapesJS-Editor kommt einen Abschnitt weiter unten.

Die Standard-Demo von GrapesJS: Blockpalette rechts, Arbeitsfläche in der Mitte, Style-Manager und Ebenenbaum. Alles, was du hier siehst, steckt im Open-Source-Core.

Sechs Teilsysteme, die mit dem Core kommen – und die deine Nutzer als eine einzige Geste erleben.

GrapesJS ist ein selbst gehostetes Open-Source-Editor-Framework und kein gehostetes Builder-Produkt. Genau dieser Unterschied macht es tauglich für den Einsatz in fremden Anwendungen.

Darunter derselbe Editor-Kern, jedes Mal für eine andere Aufgabe konfiguriert.

Unterschiedliche Gründe, aber darunter immer dasselbe Problem: Seiten zu erstellen sollte nicht jedes Mal eine Entwicklerin kosten.

Ein Page-Builder ist keine Funktion, sondern ein Dutzend Teilsysteme, die zueinander passen müssen – und weiter zueinander passen müssen, während das Produkt wächst.

Bau dein Produkt – nicht noch einen Page-Builder von Grund auf.

Keine der beiden Spalten ist umsonst. Der Unterschied liegt darin, welche Arbeit dir gehört.

Das Veröffentlichen bleibt bewusst in deiner Spalte: Es ist der Teil, der zu deinen Domains, deinem CDN und deinem Release-Prozess passen muss.

GrapesJS ist eine Schicht in deiner Anwendung, keine Plattform, an die du deine Nutzer übergibst. Nutzer, Inhalte und die Entscheidung zu veröffentlichen bleiben bei dir.

Zur Mechanik, den Editor in eine bestehende App zu hängen – iframes, Routing, Auth-Übergabe – siehe den Leitfaden zum einbettbaren Page-Builder

Der Device-Manager des Editors schaltet die Arbeitsfläche zwischen Breakpoints um, und Styles, die bei aktivem Gerät gesetzt werden, gelten nur für diese Breite.

Lass Nutzer Layout, Abstände, Typografie und Sichtbarkeit für verschiedene Bildschirmgrößen anpassen. Wie eine veröffentlichte Seite auf einem bestimmten Gerät am Ende aussieht, hängt weiterhin vom ausgelieferten HTML und CSS ab – der Editor steuert die Regeln, nicht den Browser.

Ein Block ist der Ausgangspunkt, den ein Nutzer hereinzieht. Das sind die Abschnittstypen, die die meisten Page-Builder am ersten Tag brauchen – baue sie selbst gegen die Block-Manager-API oder installiere ein Block-Plugin und starte mit einer vollen Palette.

• Hero

  Überschrift, Begleittext und eine Hauptaktion.

• Header

  Logo und Navigation, auf kleinen Bildschirmen als Menü.

• Features

  Ein Spaltensatz für Vorteile, mit Icon, Titel und Text.

• Preise

  Tarifkarten, eine davon als Empfehlung hervorgehoben.

• Stimmen

  Zitate mit Namensnennung und Avatar.

• Galerie

  Ein Bildraster, gefüllt aus dem Asset-Manager.

• Call to Action

  Eine einzelne, zentrierte Handlungsaufforderung.

• Kontakt

  Ein Formular, angebunden an den Endpunkt deiner Wahl.

• Footer

  Linkspalten, Rechtliches und sekundäre Navigation.

An dieser Unterscheidung entscheidet sich, ob GrapesJS für dich ein Website-Baukasten-Spielzeug ist oder ein Editor-Kern, auf dem du ein Produkt bauen kannst.

1. Block
2. ↓Komponente
3. ↓Eigene Komponente
4. ↓Dein Produkt

Weil eigene Komponenten auf deinem Code beruhen, kann ein GrapesJS-Editor Dinge bearbeiten, für die ein generischer Website-Baukasten gar keinen Begriff hat – eine Preistabelle an deinen Tarifen, ein Produktraster aus deinem Katalog, ein Formular an deiner API.

Die wenigsten Nutzer wollen eine leere Seite. Liefere einen Satz Startlayouts und lass sie eigene speichern – Presets konfigurieren den ganzen Editor, Vorlagen geben eine Seite zum Weiterarbeiten.

Das sind Layout-Kategorien, keine Katalogeinträge – also das, was du für deine eigenen Nutzer bauen oder kuratieren würdest. Die tatsächlich installierbaren Presets und Vorlagenmanager stehen im Plugin-Abschnitt unten.

Der Storage-Manager ist ein Client deiner API, kein Dienst. Richte ihn auf deine Endpunkte, und der Editor lädt und speichert darüber.

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

Verbinde GrapesJS mit deinem eigenen Backend und entscheide, wie Projekte, Seiten, Assets und Nutzer gespeichert werden. GJS.Market verkauft Plugins – es hostet deine Daten nicht.

Jede Karte hier unten ist ein echter Eintrag – Namen, Preise und Vorschaubilder kommen live aus dem Katalog, damit nichts auf dieser Seite von dem abweichen kann, was tatsächlich verkauft wird.

Blöcke

Erweitert die Bibliothek der Blöcke, die Nutzer ziehen.

Diese Kategorie ansehen

Blöcke

Plugin Basic Blocks

Der Grundstock an Layout-Bausteinen – Spalten, Text, Bilder, Links – damit die Palette am ersten Tag nicht leer ist.

KostenlosPlugin ansehen

Blöcke

Plugin Blocky for Tailwind CSS

Eine Blockbibliothek auf Tailwind-Basis, für Teams, deren Designsystem ohnehin in Utility-Klassen denkt.

59,00 $Plugin ansehen

Drag & Drop

Macht die Geste selbst klarer und präziser.

Diese Kategorie ansehen

Drag & Drop

Placeholder 2.0 - Premium Drag Experience

Ein deutlicherer Ablage-Indikator, damit man vor dem Loslassen genau sieht, wo der Block landet.

99,00 $Plugin ansehen

Abstände

GrapesJS LayoutEnhancer: Precision Spacing Tool

Ziehbare Griffe für Außen- und Innenabstand, sodass Abstände auf der Fläche statt in einem Zahlenfeld gesetzt werden.

49,00 $Plugin ansehen

Vorlagen

Gibt Nutzern fertige Ausgangspunkte.

Diese Kategorie ansehen

Preset

Webpage Preset

Eine fertige Konfiguration für einen Webseiten-Editor – Blöcke, Panels und Styling bereits verdrahtet.

KostenlosPlugin ansehen

Vorlagen

Templates Manager

Lässt Nutzer von einer gespeicherten Vorlage statt einer leeren Fläche starten und eigene sichern.

39,00 $Plugin ansehen

Wiederverwendbare Komponenten

Abschnitte einmal bauen und auf mehreren Seiten nutzen.

Diese Kategorie ansehen

Wiederverwendbar

Symbols

Macht aus einem Abschnitt ein seitenübergreifendes Symbol – einmal bearbeiten, alle Instanzen ziehen nach.

KostenlosPlugin ansehen

Responsive

Breakpoints und gerätespezifische Styles verwalten.

Diese Kategorie ansehen

Responsive

Responsive Pack — Breakpoint Manager for GrapesJS

Fügt Breakpoints hinzu und verwaltet sie, damit Layouts pro Bildschirmgröße neu gestaltet werden können.

14,00 $Plugin ansehen

Vier Startkonfigurationen. Jede ist ein echter Warenkorb aus Einträgen, kein Bundle – installiere, was du brauchst, und lass den Rest weg.

Preise kommen live aus dem Katalog.

Zwei Dateien, und der Editor steht auf dem Bildschirm. Alles danach ist Konfiguration.

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. Blöcke ergänzen
2. →Komponenten anpassen
3. →Speicherung konfigurieren
4. →Backend anbinden
5. →Veröffentlichen

Ab hier ist die Arbeit produktspezifisch: welche Blöcke deine Nutzer bekommen, welche Komponententypen du registrierst und wo Projekte gespeichert werden.

Der Core ist framework-agnostisch – er wird auf einen DOM-Container gehängt. Diese Seiten behandeln die Verdrahtung im Einzelnen.

Nur Eigenschaften, die sich gegen das veröffentlichte Paket und die Dokumentation des jeweiligen Projekts prüfen lassen. Die Fähigkeiten unterscheiden sich schon durch das Designziel – Craft.js ist bewusst headless, Puck ist React-first, Builder.io ist eine gehostete Plattform.

Lizenzen am 2026-09-03 gegen die npm-Registry geprüft: grapesjs 0.23.6 erscheint unter BSD-3-Clause; @measured/puck, @craftjs/core und @builder.io/react erscheinen unter MIT. Die Fähigkeiten geben die öffentliche Dokumentation der Projekte wieder – prüfe sie vor einer Entscheidung selbst.

Derselbe Editor-Kern, eine andere Frage. Wenn eine davon deine Lage genauer trifft, fang dort an.

Starte mit GrapesJS, passe das Bearbeitungserlebnis an und erweitere es um die Plugins, die dein Produkt braucht.