Vue Page Builder mit GrapesJS

Der Standard-Editor ohne angewandtes Thema. Das bekommst du, bevor du irgendetwas konfigurierst – der Ausgangspunkt, von dem aus jeder Builder unten angepasst wurde.

Ein Produktionsseiten-Builder besteht aus weit mehr als nur ein paar Vue-Komponenten. Er ist eine Leinwand, ein Drag-and-Drop-System, ein Komponentenmodell, eine Stil-Engine, responsive Bearbeitung, Rückgängigkeitsverlauf, Asset-Handling, Speicherung und Export. Hier ist die gesamte Oberfläche und wer letztlich jedes Teil besitzt.

• GrapesJS-Kern

  Leinwand bearbeiten

  Ein isoliertes Dokument bearbeitet Benutzer direkt, mit eigenen Stilen und Scrolls.

• GrapesJS-Kern

  Drag & Drop

  Abwurfziele, Einfügungspunkte, Umordnungs- und Verschachtelungsregeln.

• GrapesJS-Kern

  Komponentenmodell

  Typisierte Elemente mit eigenen Einstellungen, Einschränkungen und Verhalten.

• GrapesJS-Kern

  Auswahl & Werkzeugleisten

  Klicken zum Auswählen, Umrisse mit dem Maus, Symbolleisten pro Element und Badges.

• GrapesJS-Kern

  Style Manager

  Typografie-, Farb-, Abstands- und Layout-Steuerungen sind an die Selektoren gebunden.

• GrapesJS-Kern

  Responsive Bearbeitung

  Gerätebreiten und Breakpoint-Scoped-Stile auf derselben Leinwand.

• GrapesJS-Kern

  Layer Manager

  Ein Seitenbaum, sodass tiefe Strukturen navigierbar bleiben.

• GrapesJS-Kern

  Rückgängig machen & neu machen

  Eine Befehlshistorie bei jeder Bearbeitung, nicht nur im Text.

• GrapesJS-Kern

  HTML- und CSS-Export

  Sauberes Markup und Stylesheet, das aus dem aktuellen Dokument generiert wird.

• Plugins

  Blockbibliothek

  Die fertigen Abschnitte, die die Nutzer einziehen. Deine oder installiert.

• Plugins

  Vorlagen

  Ganze Startlayouts, damit niemand auf eine leere Leinwand trifft.

• Plugins

  Vermögensverwaltung

  Uploads, Medienbibliotheken und Bildverarbeitung.

• Plugins

  Rich Text Editing

  Inline-Textformatierung über den integrierten Editor hinaus.

• Plugins

  Mehrseitige Projekte

  Mehr als eine Seite in einem einzigen Projekt.

• Deine Vue-App

  Lagerung

  Wo Projektdaten geschrieben und gelesen werden. Ihr API, Ihre Datenbank.

• Deine Vue-App

  Authentifizierung & Rollen

  Wer welches Projekt öffnen, bearbeiten und veröffentlichen darf.

• Deine Vue-App

  Mehrfach-Mietverhältnisse

  Die Seiten, Assets und Vorlagen eines Kunden von den Seiten eines Kunden zu isolieren.

• Deine Vue-App

  Verlagswesen & Hosting

  Genehmigte Ausgaben in eine Live-Seite über Ihre Infrastruktur zu verwandeln.

• Deine Vue-App

  Pläne & Abrechnung

  Was jeder Kunde Anspruch hat und was er dafür bezahlt.

Die mittlere Spalte ist der Sinn von GJS.Market: Sie installiert eine echte Fähigkeit und nicht die Terminplanung. Die rechte Spalte wird niemals zum Problem eines anderen – das ist Ihr Produkt, und diese Seite spricht in jedem Abschnitt explizit darüber.

GrapesJS ist kein Ersatz für deine Anwendung und kein gehosteter Dienst. Es ist eine Bearbeitungs-Engine, die in einem Element einer Route integriert ist. Alles darüber und darunter in diesem Diagramm bleibt deins.

1. 01

   Ihre Vue / Nuxt-Anwendung

   Alles, was das Produkt zu deinem macht. GrapesJS hat zu keinem davon eine Meinung.

   • Authentifizierung
   • Nutzer
   • Routing
   • Abrechnung
   • Geschäftslogik
   • APIs
   ↓
2. 02

   Der GrapesJS-Editor

   Eine montierte Instanz, innerhalb einer Komponente, auf einer Route. Das ist die Schicht, die du nicht baust.

   • Leinwand
   • Blöcke
   • Komponenten
   • Stile
   • Schichten
   • Vermögenswerte
   ↓
3. 03

   Dein Backend

   Der Redakteur übergibt dir zwei Artefakte und einen Medienstream. Was als Nächstes passiert, ist die Entscheidung deines API.

   • Projekt JSON
   • HTML + CSS
   • Medien
   • Rollen
   ↓
4. 04

   Deine Datenbank

   Gewöhnliche Zeilen in einem von dir entworfenen Schema. Nichts hier ist ein GrapesJS-Format, das du übernehmen musst.

   • Projekte
   • Versionen
   • Mieter
   • Seiten

Lies es von oben bis unten: Deine Vue-Anwendung authentifiziert den Benutzer und leitet ihn zu einer Editor-Seite weiter; der Editor erstellt Projektdaten; dein API schreibt sie in deine Datenbank. Der Editor kommuniziert nie mit deiner Datenbank, und deine Datenbank muss den Editor nie verstehen.

Nein. Das ist die erste Frage, die die meisten Vue-Entwickler stellen, und die Antwort verändert, wie sich der Rest der Seite liest. Die beiden Ebenen überlappen sich nicht: Eine führt deine Anwendung aus, die andere betreibt eine Bearbeitungsfläche darin.

Eine ehrliche Einschränkung: Die Leinwand rendert schlichte DOM in einem iframe, keine montierten Vue-Komponenten. Deine App ist Vue; was deine Nutzer bearbeiten, ist HTML und CSS, die deine App dann nach Belieben rendert.

Der Unterschied zwischen einem generischen Website-Builder und einem Builder, der zu Ihrem Produkt gehört, ist der Komponentensatz. Zwingen Sie Ihr Content-Modell nicht in die Elementtypen anderer – registrieren Sie Ihr eigenes.

// builder/registerProductBlocks.ts
import type { Editor } from 'grapesjs';

// A plugin is just a function that receives the editor, so everything below
// works identically in Vue, Nuxt, React or a plain HTML page.
export function registerProductBlocks(editor: Editor): void {
  // A custom component type: your own element, with your own settings.
  editor.DomComponents.addType('pricing-table', {
    isComponent: (el) => el.dataset?.gjsType === 'pricing-table',
    model: {
      defaults: {
        droppable: false,
        traits: [
          { name: 'plan', type: 'select', options: ['free', 'pro', 'team'] },
          { name: 'highlight', type: 'checkbox' },
        ],
      },
    },
  });

  // A block: what the user actually drags in from the panel.
  editor.BlockManager.add('pricing-table', {
    label: 'Pricing',
    category: 'Sections',
    content: { type: 'pricing-table' },
  });
}

• Ein Komponententyp definiert, was ein Element ist: was es akzeptiert, was es ablehnt und welche Einstellungen es freilegt.
• Ein Block ist das, was Nutzer im Panel sehen – derselbe Typ kann mehrere Blöcke mit unterschiedlichen Presets unterstützen.
• Traits werden zur Einstellungs-Seitenleiste, sodass deine Nutzer Elemente konfigurieren, anstatt das Markup zu bearbeiten.
• 'droppable: false' und passende Einschränkungen sind die Methoden, wie man verhindert, dass eine entworfene Komponente auseinandergebaut wird.
• Mit Befehlen können Sie eigene Aktionen anhängen – veröffentlichen, auf einen anderen Tenant duplizieren, Überprüfung anfordern.
• Nichts davon ist Vue-spezifisch: Ein Plugin ist eine Funktion, die den Editor empfängt, also funktioniert es auch in Nuxt, React oder einfachem HTML.

Zwinge dein Produkt nicht in einen generischen Website-Builder. Passe den Editor an dein eigenes Content-Modell und Design-System an.

Eine uneingeschränkte Leinwand erzeugt Seiten, die das Produkt, in dem sie leben, peinlich machen. Der Editor ist in beide Richtungen konfigurierbar – die nützliche Einstellung ist nicht maximale Freiheit, sondern begrenzte Freiheit.

Geben Sie den Nutzern kreative Freiheit, ohne dass sie das Designsystem Ihres Produkts zerstören.

Der wichtigste Faktor dafür, ob ein Page Builder genutzt wird, ist, was beim ersten Besuch im Block-Panel auf dich wartet. Baue die Abschnitte, die dein Produkt tatsächlich braucht, oder installiere eine Bibliothek und benenne sie neu.

• Hero

  Schlagzeile, unterstützende Zeile und eine Hauptaktion.

• Funktionsraster

  Ein sich wiederholendes Raster von Fähigkeiten oder Vorteilen.

• Preisgestaltung

  Plane Spalten mit Merkmalen und einem Aufruf zum Handeln.

• Erfahrungsberichte

  Zitate mit Quellenangabe, in einer Reihe oder auf einem Karussell.

• FAQ

  Frage-und-Antwort-Paare, erweiterbar oder flach.

• Kontakt

  Ein Formularabschnitt, der auf Ihrem eigenen Endpunkt gepostet wird.

• CTA-Streifen

  Ein vollbreites Band mit einer klaren Aktion.

• Fuß

  Navigationsspalten, legale Links und Markenzeichen.

GrapesJS hostet nichts und wählt keine Datenbank aus. Du registrierst einen Speicheradapter mit zwei Methoden – laden und speichern – und beide kommunizieren mit deinem API. Nichts verlässt deine Infrastruktur.

const editor = grapesjs.init({
  container: host.value!,
  storageManager: {
    type: 'app-api',
    autosave: true,
    stepsBeforeSave: 10,
  },
  // Registered as a plugin so the adapter exists before the first load().
  plugins: [
    (ed) => {
      ed.Storage.add('app-api', {
        async load() {
          const res = await fetch(`/api/projects/${props.projectId}`);
          if (!res.ok) throw new Error(`Load failed: ${res.status}`);
          return await res.json();
        },
        async store(project) {
          const res = await fetch(`/api/projects/${props.projectId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(project),
          });
          if (!res.ok) throw new Error(`Save failed: ${res.status}`);
        },
      });
    },
  ],
});

• Registrieren Sie den Adapter als Plugin, damit er existiert, bevor der Editor seinen ersten Laden durchführt.
• 'autosave' mit 'stepsBeforeSave'-Batches schreibt statt eines pro Tastendruck auszusenden.
• Speichere das Projekt JSON als Wahrheitsquelle; es ist das, was der Editor neu lädt.
• Behalten Sie Versionen als gewöhnliche Zeilen – die Versionshistorie ist eine Schema-Entscheidung, kein Editor-Feature.
• Autorisiere jede Last und Speicherung auf dem Server. Die Projekt-ID in der Anfrage ist ein Anspruch, keine Berechtigung.
• Speichere den Speicherstand in deinem eigenen Vue UI, indem du die Speicherereignisse des Editors anhörst.

Du kontrollierst deine Daten und dein Backend. Der Editor ist ein Client deines API wie jeder andere Teil deiner App.

Zwei Artefakte kommen aus dem Editor und sind nicht austauschbar. Das falsche Speichern ist der Fehler, der Seiten sechs Monate später unbearbeitbar macht.

// The source of truth. Store it; the editor reloads from it.
const projectData = editor.getProjectData();

// The output. Regenerate it every time you publish.
const html = editor.getHtml();
const css = editor.getCss();

await $fetch(`/api/projects/${projectId}/publish`, {
  method: 'POST',
  body: { projectData, html, css },
});

// Authorize the request and sanitize `html` on the server —
// never in the component that produced it.

Speichere Projektdaten zum Bearbeiten. Generiere HTML und CSS, wenn du publizierbare Ausgaben brauchst.

Autoren und Veröffentlichen sind unterschiedliche Aufgaben. GrapesJS endet in dem Moment, in dem ein Nutzer mit einer Seite zufrieden ist; alles danach ist dein Workflow, auf deiner Infrastruktur.

Jeder Kunde erhält seine eigenen Seiten, eigene Assets, eigene Vorlagen und seine eigene Marke. Diese Isolation ist eine Eigenschaft Ihres Datenmodells und Ihres API – der Editor erhält einfach das richtige Projekt.

Echte Listings von GJS.Market, gruppiert nach dem Problem, das sie entfernen. Jedes einzelne davon wird in derselben Editor-Instanz installiert, die deine Vue-Komponente erstellt.

Blöcke & Vorlagen

Das Problem: ein leeres Block-Panel beim ersten Durchlauf. Was sie hinzufügen: fertige Abschnitte, Vorlagenverwaltung und mehrseitige Projekte. Wer braucht sie: jeder, dessen Nutzer keine Entwickler sind.

Durchstöbern Sie diese Kategorie

Plugin Basic Blocks

Ein Startblock-Set, damit das Panel nützlich ist, bevor du dein eigenes schreibst.

KostenlosView-Plugin

Plugin Blocky for Tailwind CSS

Tailwind-basierte Abschnitte für Produkte, deren Designsystem bereits Tailwind ist.

59,00 $View-Plugin

Templates Manager

Speichere, liste auf und wende ganze Layouts als wiederverwendbare Ausgangspunkte an.

39,00 $View-Plugin

Pages Manager

Mehrere Seiten in einem Projekt, mit Navigation zwischen ihnen.

25,00 $View-Plugin

Speicherung und Wiederherstellung

Das Problem: verlorene Arbeit und handgedrehte Persistenz. Was sie hinzufügen: Projektmanagement, autosave, Absturzwiederherstellung und alternative Speicher-Backends. Wer braucht sie: jedes Produkt mit echten Kunden im Editor.

Durchstöbern Sie diese Kategorie

Grapesjs Project Manager

Projektliste, Erstellung und Wechsel statt eines Editors pro Route.

KostenlosView-Plugin

Autosave & Restore — Crash Recovery for GrapesJS

Stellt ungespeicherte Arbeit nach einem Absturz oder einem geschlossenen Tab wieder her – der Fehler, den Nutzer nie verzeihen.

12,00 $View-Plugin

IndexedDB Storage

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

KostenlosView-Plugin

Directus Storage

Liest und schreibt Projekte über ein Directus-Backend statt über ein benutzerdefiniertes API.

KostenlosView-Plugin

Vermögenswerte & Export

Das Problem: Bildverarbeitung und das Herausholen von Ausgaben aus dem Editor. Was sie hinzufügen: Widgets hochladen, CDN-Integrationen, Bildbearbeitung und Archiv-Export. Wer braucht sie: Entwickler, bei denen Nutzer ihre eigenen Medien mitbringen.

Durchstöbern Sie diese Kategorie

Grapesjs Cloudinary

Lädt Editor-Medien über Cloudinary hoch und bereitet sie als Redakteur.

KostenlosView-Plugin

Grapesjs Uppy

Ein vollständiges Upload-Erlebnis – Ziehen, Fortschritt, mehrere Quellen.

KostenlosView-Plugin

TOAST UI Image Editor

Schneide, vergrößere und passe Bilder im Editor an, statt davor.

KostenlosView-Plugin

Export Zip

Lädt das aktuelle Projekt als HTML/CSS-Archiv herunter.

KostenlosView-Plugin

Schnitt und Layout

Das Problem: Die Bearbeitungsfläche ist dünner, als Ihre Nutzer erwarten. Was sie hinzufügen: reichhaltigere Textbearbeitung, Formulare, Breakpoint-Steuerung und Code pro Komponenten. Wer braucht sie: Teams, die einen bestehenden Editor ersetzen.

Durchstöbern Sie diese Kategorie

Plugin Forms

Formen Sie Komponenten mit typisierten Feldern, für Erbauer, die Eingaben sammeln.

KostenlosView-Plugin

Responsive Pack — Breakpoint Manager for GrapesJS

Verwalte Breakpoints und Gerätebreiten über die drei Standardwerte hinaus.

14,00 $View-Plugin

Grapesjs Component Code Editor

Komponenten-Bearbeitung von HTML/CSS für die Nutzer, die es möchten.

KostenlosView-Plugin

Derselbe Katalog, geschnitten nach dem Produkt, das du baust. Installiere den Stack, der zu deinem Fall passt, und ignoriere den Rest – ein Editor mit jedem geladenen Plugin ist langsamer und schwerer zu bedienen, nicht besser.

Die angezeigten Preise entsprechen den aktuellen GJS.Market-Listenpreisen; kostenlose Plugins sind markiert.

Wenn ein Stapel oben nicht zu deinem Produkt passt, fang stattdessen hier an. Das sind die Katalogbereiche, ungefähr in der Reihenfolge, in der ein Bauunternehmer hineinwächst.

• BlöckeFertige Abschnitte für das Blockfeld.
• KomponentenNeue Elementtypen mit eigenen Einstellungen.
• PresetsGanze Editor-Konfigurationen, thematisch und fertig.
• LagerstättenAdapter zum Speichern von Projektdaten.
• VermögenswerteUploads, Medienbibliotheken und Bildwerkzeuge.
• StileZusätzliche Bedienelemente für den Style Manager.
• Rich TextInline-Textbearbeitung über die Standard-Symbolleiste hinaus.
• WebseitenPage-Level-Features und komplette Seitenkits.
• NewsletterE-Mail-Ausgabe, MJML und Kampagnenblöcke.
• EntwicklerwerkzeugeDebugging, Inspektion und Hilfsmittel zur Bauzeit.
• KIErstellung und Unterstützung im Editor.

Keine der beiden Spalten ist frei. Die Frage ist nur, in welcher Spalte dein Team seine Zeit verbringen sollte.

Absichtlich erscheinen in dieser Tabelle keine Kosten- oder Zeitzahlen – wir kennen Ihr Team nicht, und hier wäre jede Zahl erfunden.

Reihe für Zeile, was du selbst schreiben und was bereits existiert. "Erweiterbar" bedeutet, dass die Engine den Hook liefert und du das Verhalten lieferst – meist ein paar Zeilen, manchmal ein Plugin.

Included = wird mit dem Kern ausgeliefert. Extensible = ein dokumentierter Erweiterungspunkt sowie Plugins, wo sie existieren.
Verifiziert mit GrapesJS 0.23.6 auf 2026-09-02.

Fünf Schritte, eine Komponente. Es gibt keinen offiziellen Vue-Wrapper und du brauchst keinen: GrapesJS rendert in ein einfaches Element, daher ist die einzige Vue-spezifische Frage, welcher Lebenszyklus-Hook 'init()' aufruft. Installiere grapesjs 0.23.6, erstelle die Komponente, initialisiere beim Mount, passe deine Plugins weiter, zerstöre beim Unmount.

1. 01GrapesJS installieren
2. 02Erstellen Sie die Editor-Komponente
3. 03Initialisieren auf der Montierung
4. 04Plugins konfigurieren
5. 05Zerstören beim Absteigen

<!-- components/PageBuilder.vue -->
<template>
  <div ref="host" class="page-builder" />
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
import grapesjs, { type Editor } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// shallowRef, not ref: the editor is a large non-reactive instance and
// deep-proxying it costs performance for nothing.
const editor = shallowRef<Editor | null>(null);
const host = ref<HTMLElement | null>(null);

onMounted(() => {
  editor.value = grapesjs.init({
    container: host.value!,
    height: '100%',
    fromElement: false,
    storageManager: false,
    plugins: [],          // GJS.Market plugins go here
    blockManager: { blocks: [] },
  });
});

onBeforeUnmount(() => {
  editor.value?.destroy();
  editor.value = null;
});
</script>

• 'shallowRef', nicht 'ref': Der Editor ist ein großes, nicht reaktives Objekt, und das Deep-Proxying kostet kostenlos Performance.
• 'onMounted' läuft nie auf dem Server, was das in Nuxt ohne zusätzliche Maschinen sicher macht.
• 'destroy()' in Unmount-Angelegenheiten – eine Routenänderung, die einen Redakteur mit Leaks, seinen Zuhörern und seinem iframe zurücklässt.
• 'storageManager: falsch', während du alles verkabelst, und dann den Adapter einbauen, wenn der API bereit ist.
• Importiere das Editor-Stylesheet einmal; es gestaltet die Panels, nicht deine Anwendung.
• Alles darüber hinaus – Events, Wrapper, die zusammensetzbare Form – steht im Integrationsleitfaden.

GrapesJS benötigt einen Browser DOM. Unter der Server-Rendering von Nuxt gibt es kein "Dokument", daher muss der Editor auf dem Client erstellt werden – was "onMounted" bereits garantiert. "<ClientOnly>" ist die Gürtel-und-Stützen-Version, und dort befindet sich das Notfall-Markup.

<!-- pages/editor.vue -->
<template>
  <ClientOnly>
    <PageBuilder :project-id="route.params.id" />

    <template #fallback>
      <p class="editor-placeholder">Loading the editor…</p>
    </template>
  </ClientOnly>
</template>

<script setup lang="ts">
const route = useRoute();
</script>

• Verwende '<ClientOnly>', wenn du anstelle des Editors einen servergerenderten Fallback möchtest.
• Das '. client.vue'-Suffix ist Nuxt' eigene Art, dasselbe für eine ganze Komponente auszudrücken.
• SSR ist nicht der interessante Teil dieser Seite – es ist eine Grenze, und es ist eine zweizeilige Grenze.
• Alles außerhalb der Editor-Route rendert auf dem Server genau so, wie es heute der Fall ist.

Jedes dieser Dinge ist von Anfang an günstig zu bekommen und teuer zu beheben, sobald die Kunden im Editor sind.

• ✕Der Fehler

  Initialisierung während SSR

  Das Aufrufen von 'init()' an irgendeinem Ort, der auf dem Server läuft, wirft aus, weil es kein 'Dokument' gibt, in das man die Leinwand rendern könnte.

  ✓Was stattdessen zu tun ist

  Erstelle den Editor nur in 'onMounted' und wrappe die Route in '<ClientOnly>', wenn du einen server-gerenderten Fallback möchtest.

• ✕Der Fehler

  Nur das HTML wird gespeichert

  Die gerenderte Ausgabe kann nicht wieder in ein editierbares Dokument umgewandelt werden. Jede auf diese Weise gespeicherte Seite wird sofort in dem Moment der Veröffentlichung eingefroren.

  ✓Was stattdessen zu tun ist

  Speichere das Projekt JSON als Wahrheitsquelle und generiere HTML und CSS bei jeder Veröffentlichung neu.

• ✕Der Fehler

  Nutzern eine unbegrenzte, leere Leinwand bieten

  Totale Freiheit erzeugt Seiten, die dein Designsystem zerstören, und ein Erstaufführungserlebnis ohne Panel bringt überhaupt keine Seiten hervor.

  ✓Was stattdessen zu tun ist

  Shippe kuratierte Blöcke und Vorlagen und beschränke die Stileigenschaften, die Nutzer erreichen können.

• ✕Der Fehler

  Installieren jedes Plugins

  Jedes Plugin fügt Panels, Bündelgewicht und eine Oberfläche hinzu, die Ihre Nutzer verstehen müssen. Ein überfüllter Editor ist schwieriger zu bedienen, nicht leistungsfähiger.

  ✓Was stattdessen zu tun ist

  Beginne mit dem Stack für deine Produktform und füge ein Plugin hinzu, wenn ein echter Bedarf besteht.

Die Dinge, die eine funktionierende Demo von etwas unterscheiden, das man zahlenden Kunden präsentieren kann.

Verschiedene Produkte, eine Architektur. Wenn Sie Ihr Team hier erkennen, ist der Rest dieser Seite für Sie geschrieben.

Nutze Vue für deine Anwendung und GrapesJS für das visuelle Bearbeitungserlebnis. Füge eigene Komponenten, Blöcke, Vorlagen, Speicher- und Veröffentlichungsworkflow hinzu – und erweitere den Builder dann mit GJS.Market-Plugins, wenn du mehr brauchst.