Baue einen React Page BuilderOhne den Editor von Grund auf neu zu bauen

Der unveränderte Open-Source-Editor. Das ist die Grundlage, auf der alles andere auf dieser Seite aufbaut – Canvas, Blöcke, Stilmanager, Gerätewechsel, Rückgängig/Neumachen, Export.

Ein React-Seitenbauer ist eine visuelle Bearbeitungsoberfläche, die in eine React-Anwendung eingebettet ist und es Nutzern ermöglicht, Seiteninhalte zu erstellen, zu verändern und zu anordnen, ohne HTML und CSS von Hand schreiben zu müssen.

Das wichtige Wort ist embedded. Ein React-Seitengenerator ist keine separate Website, die Ihre Nutzer besuchen – er ist ein Weg innerhalb Ihres Produkts, hinter Ihrem Login, in Ihre Datenbank.

Drei Schichten erledigen die Arbeit und gehören drei verschiedenen Eigentümern. Verwirrung ist der häufigste Grund, warum ein Seitenbau-Projekt ins Stocken kommt.

Eine Leinwand, auf die man eine Kiste legen kann, ist ein Wochenende. Alles darunter verwandelt diesen Prototyp in etwas, das man zahlenden Kunden präsentieren kann – und jeder Punkt auf der Liste ist ein Subsystem, das jemand bauen, testen und weiterarbeiten muss.

• Visuelle Leinwand — GrapesJS-Kern
• Komponenten — GrapesJS-Kern
• Blöcke — GrapesJS-Kern
• Drag & Drop — GrapesJS-Kern
• Style Manager — GrapesJS-Kern
• Responsive Bearbeitung — GrapesJS-Kern
• Vermögenswerte — GrapesJS-Kern
• Rich Text — GrapesJS-Kern
• Rückgängig machen / neu machen — GrapesJS-Kern
• Lagerung — GrapesJS-Kern
• Geräte — GrapesJS-Kern
• Export — GrapesJS-Kern
• Plugin-System — GrapesJS-Kern
• Seiten — Plugins
• Vorlagen — Plugins
• Berechtigungen — Ihr Antrag
• Verlagswesen — Ihr Antrag

Den ersten Drag-and-Drop-Prototyp zu bauen ist relativ einfach. Alles drumherum zu bauen, was einen Editor in der Produktion zuverlässig macht, ist der teure Teil.

Es gibt einen guten Grund, deinen eigenen Editor zu schreiben: Dein Bearbeitungsmodell ist wirklich anders als alles, was es gibt. Abgesehen davon verlangt jeder der drei Wege tatsächlich von deinem Team.

Baue keinen visuellen Editor von Grund auf. Baue dein React-Produkt auf einer bewährten Editor-Grundlage auf.

Jede Ebene hat eine Aufgabe. Halte sie getrennt, und das Ganze bleibt austauschbar – einschließlich des Editors, was der Sinn eines Standard-Editors ist.

Der gleiche Editor-Kern, der auf fünf verschiedene Produkte zeigte. Was sich zwischen ihnen ändert, sind die Blöcke, das Speichermodell und die Ausgabe – nicht der Editor.

Fünf Werkzeuge, die sich alle als visuelle Editoren für React beschreiben und nicht austauschbar sind. Jede Zelle unten stammt aus der eigenen Dokumentation jedes Projekts oder den Metadaten des veröffentlichten Pakets.

✓ = dokumentierte Fähigkeit. Benutzerdefiniert = unterstützt, aber Sie implementieren sie. Über Integration / Hängt / Enterprise = verfügbar unter den vom Anbieter festgelegten Bedingungen. — = nicht angeboten oder nicht als Fähigkeit des Produkts selbst dokumentiert.
2026-09-02 wurde anhand der offiziellen Dokumentation jedes Projekts, der Metadaten des npm-Registers und des GitHub-Repositoriums überprüft. Produktfähigkeiten und Preise ändern sich im Laufe der Zeit – prüfen Sie die aktuelle Dokumentation, bevor Sie eine architektonische Entscheidung treffen.

Keine dieser Fragen ist universell besser. Sie sind Antworten auf verschiedene Fragen, und die Frage, die du tatsächlich stellst, ist meist offensichtlich, sobald sie aufgeschrieben ist.

Drei Ergebnisse, von denen eines nicht GrapesJS ist. Wenn eine Vergleichsseite dir nicht sagen kann, wann du weggehen sollst, ist sie kein Vergleich.

Zwei Pakete und eine Komponente. Der Wrapper bündelt die Kernbibliothek nicht, also installieren Sie beide. Das untenstehende Beispiel läuft wie beschrieben – der @grapesjs/react-Wrapper verlangt, dass der Core explizit weitergegeben wird, was der Schritt ist, den die meisten Drittanbieter-Tutorials weglassen.

'use client';

import grapesjs, { type Editor } from 'grapesjs';
import GjsEditor from '@grapesjs/react';
import 'grapesjs/dist/css/grapes.min.css';

export default function PageBuilder() {
  const onEditor = (editor: Editor) => {
    // The full GrapesJS API is yours from here: Blocks, Pages,
    // DeviceManager, Commands, StorageManager.
    editor.Blocks.add('hero', {
      label: 'Hero',
      category: 'Sections',
      content: '<section class="hero"><h1>Headline</h1></section>',
    });
  };

  return (
    <GjsEditor
      // Required. The wrapper does not bundle the core library.
      grapesjs={grapesjs}
      options={{
        height: '100vh',
        // Persistence is wired separately — see the storage step below.
        storageManager: false,
      }}
      onEditor={onEditor}
    />
  );
}

Was jedes Stück bewirkt

Speichern Sie Projekte in Ihrer eigenen Datenbank

Speicher ist der Ort, an dem Prototypen enden und Produkte beginnen. GrapesJS liefert lokalen und entfernten Speicher aus und ermöglicht es Ihnen, einen vollständig individuellen Adapter mit zwei asynchronen Methoden zu registrieren – sodass der Editor nie wissen muss, wie Ihr Backend aussieht.

// Persist projects to your own API. GrapesJS ships `local` and `remote`
// storage; `Storage.add` registers a fully custom adapter.
// Docs: grapesjs.com/docs/modules/Storage.html

const onEditor = (editor: Editor) => {
  editor.Storage.add('api', {
    async load() {
      const res = await fetch(`/api/pages/${pageId}`);
      return res.json(); // → the project JSON GrapesJS restores from
    },
    async store(project) {
      await fetch(`/api/pages/${pageId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(project),
      });
    },
  });
};

// …then point the editor at it:
options={{
  storageManager: { type: 'api', autosave: true, stepsBeforeSave: 5 },
}}

Editor-Ausgabe in eine Live-Seite verwandeln

Der Editor gibt HTML und CSS zurück. Was man damit macht, ist eine Anwendungsentscheidung: Sie rendern sie von einer Next.js-Route, pushen Sie sie auf ein CDN oder senden Sie sie als E-Mail. Der Editor befindet sich nicht im Serving Path.

// Editor output → a production page.
// getHtml/getCss return the exact markup the canvas rendered.

const html = editor.getHtml();
const css = editor.getCss();

await fetch('/api/publish', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ slug, html, css }),
});

// Your app renders it wherever you control — a Next.js route, a CDN
// object, an email send. The editor is not in the serving path.

Verifiziert mit @grapesjs/react 0.23.6, das auf React 18/19 und Next.js 15 abzielt. Ein Hinweis, den man früh wissen sollte: Der React-Wrapper baut dein UI around auf der Leinwand – er rendert deine React-Komponenten nicht inside darauf. Wenn das Rendern von lebenden React-Komponenten auf der Leinwand eine harte Voraussetzung ist, ist ein React-First-Editor die bessere Wahl, und diese Seite sagt das auch im obigen Vergleich.

Die meisten "Wir müssen unseren Redakteur ersetzen"-Gespräche drehen sich um eine fehlende Fähigkeit. Einen Redakteur zu ersetzen kostet ein Viertel; das Hinzufügen einer Fähigkeit kostet einen Nachmittag.

Beginnen Sie mit dem Editor-Kern und fügen Sie die Funktionalität hinzu, die Ihr Produkt tatsächlich benötigt. Preise, Namen und Thumbnails stammen direkt aus dem Katalog, sodass hier nichts von dem zum Verkauf stehenden Dinge abweichen kann.

React-Integration

Starter, React-UI-Schichten und Komponentenvoreinstellungen für Teams, die den Editor in einer React- oder Next.js-App montieren.

Durchsuchen-Kategorie

GrapesJS React Demo — Starter Integration for React Developers

Eine funktionierende React-Integration zum Starten statt einer leeren Datei.

KostenlosView-Plugin

React UI for GrapesJS

React-UI-Komponenten für die Panels rund um die Leinwand.

KostenlosView-Plugin

Reactor Preset for GrapesJS

Ein React-orientiertes Preset, sodass der Editor konfiguriert und nicht nackt ankommt.

KostenlosView-Plugin

GrapesJS Shadcn

Eine vollständige shadcn-ähnliche Editor-Oberfläche – der deutlichste Beweis dafür, wie weit die Benutzeroberfläche sich bewegen kann.

850,00 $View-Plugin

Inhalt & Struktur

Was Nutzer ziehen und wo die Seiten stehen: Blockpaletten, Mehrseitenhandhabung, Vorlagen und Bruchpunkte.

Durchsuchen-Kategorie

Plugin Basic Blocks

Die Starter-Blockpalette, damit die Nutzer am ersten Tag etwas zum Ziehen haben.

KostenlosView-Plugin

Pages Manager

Mehrseitige Projekte mit Navigations- und Seiteneinstellungen.

25,00 $View-Plugin

Templates Manager

Gespeicherte Vorlagen, aus denen Nutzer wählen, anstatt leer zu beginnen.

39,00 $View-Plugin

Responsive Pack — Breakpoint Manager for GrapesJS

Benutzerdefinierte Breakpoints, die zu deinem Designsystem passen, nicht zu den Standardwerten.

14,00 $View-Plugin

Speicherung & Persistenz

Der Teil, der jedem Prototyp fehlt. Projektmanagement, Offline-Speicher, Cloud-Adapter und Absturzwiederherstellung.

Durchsuchen-Kategorie

Grapesjs Project Manager

Mehrere Projekte pro Nutzer, aufgelistet, geladen und gewechselt.

KostenlosView-Plugin

IndexedDB Storage

Lokal-zuerst-Persistenz im Browser, nützlich für Entwürfe und Offline-Bearbeitung.

KostenlosView-Plugin

Cloud Firestore

Ein fertiger Speicheradapter für Firestore-gestützte Produkte.

KostenlosView-Plugin

Autosave & Restore — Crash Recovery for GrapesJS

Autosave und Wiederherstellung, also ist ein verlorener Tab kein verlorener Nachmittag.

12,00 $View-Plugin

Spezialisierte Oberflächen

Wo ein Page Builder als Nächstes wächst: E-Mail-Ausgabe, Workflows in Utility-Klassen und Accessibility/SEO-Audits.

Durchsuchen-Kategorie

MJML Preset

MJML-Komponenten im Canvas, live kompiliert – eine E-Mail, die in echten Clients gerendert wird.

KostenlosView-Plugin

GrapesJS Email Blocky – Premium Responsive Email Blocks

Responsives E-Mail-Blockpaket für Newsletter- und Kampagnen-Workflows.

69,00 $View-Plugin

Plugin Blocky for Tailwind CSS

Tailwind-Block gesetzt, sodass die Editor-Ausgabe mit dem Rest deiner Codebasis übereinstimmt.

59,00 $View-Plugin

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

Zugänglichkeit und SEO-Prüfung im Herausgeber, vor der Veröffentlichung.

KostenlosView-Plugin

Drei Einkaufslisten statt eines Katalog-Dumps. Jede einzelne entspricht dem, was ein funktionierender Build dieses Produkts über den freien Kern hinaus benötigt.

Live-Katalogpreise. Ein Stapel ist ein Vorschlag, kein Bündel – kaufen Sie die benötigten Teile.

Die Editor-Lizenz ist selten die Zahl, die zählt. Das sind die Kostenstellen, die jede Route schafft – absichtlich ohne erfundene Zahlen, denn die Preise und der Umfang Ihres Teams sind die einzigen Inputs, die eine Zahl real machen würden.

Der teure Teil eines Page Builders ist nicht die erste Demo. Es ist alles, was nötig ist, um den Editor produktionsbereit zu machen.

Hier ist das gesamte Argument auf einem Bildschirm. Die linke Spalte zeigt Arbeit, die nur du machen kannst, weil sie dein Produkt ist. Die anderen beiden sind bereits existierende Arbeiten.

Der teure Teil eines Seitenbauers ist nicht die erste Demo. Es ist alles, was nötig ist, um den Redakteur produktionsreif zu machen – und fast nichts davon ist das, wofür Ihre Kunden Sie bezahlen.

Vier Teams kommen mit derselben Anforderung und sehr unterschiedlichen Einschränkungen auf diese Seite.

Drei Fragen. Zwei der vier Antworten sind nicht GrapesJS.

Jede davon geht deutlich tiefer als die obige Matrix – Datenmodelle, Migrationspfade und die Fälle, in denen das andere Tool gewinnt.

Beginnen Sie mit GrapesJS, integrieren Sie es mit React und erweitern Sie Ihren Editor um die Funktionalität, die Ihr Produkt benötigt.