Bette einen Page Builder direkt in dein SaaS ein

Einbettbare Plugins entdecken

Canvas
Blöcke
Stile
Medien
Seiten

Eure API
Die Endpunkte, mit denen der Editor spricht
- Projekte
- Medien
- Nutzer
- Berechtigungen
Eure Datenbank
Wo die Inhalte tatsächlich liegen
- PostgreSQL
- MySQL
- MongoDB
- Was auch immer ihr bereits betreibt
Eure Publishing-Infrastruktur
Wie die fertige Seite die Welt erreicht
- Website
- CDN
- CMS
- Anwendung

Der Editor läuft in eurer Anwendung – nicht auf einer separaten Plattform.

Warum einbetten

Warum einen Page Builder einbetten?

Wer Kunden zu einem externen Builder schickt, verliert die Sitzung, die Marke und die Daten. Einbetten behält alle drei.

Behaltet eure UX

Eure Kunden verlassen euer Produkt nie. Bearbeiten ist ein weiterer Screen in der App, die sie ohnehin kennen – keine Übergabe an etwas Fremdes.

Behaltet euer Branding

Panels, Icons, Typografie und Begriffe könnt ihr ändern, sodass der Editor wie ein nativer Teil eurer Anwendung wirkt.

Behaltet eure Daten

Projekte, Medien und Inhalte liegen in eurer eigenen Infrastruktur – nach euren Regeln für Aufbewahrung, Speicherort und Backups.

Behaltet euer Backend

Der Editor ruft die Endpunkte auf, die ihr schon habt. Kein paralleles Datenmodell, kein Abgleich zwischen zwei Quellen der Wahrheit.

Behaltet euren Publishing-Prozess

Entwurf, Review und Veröffentlichung bleiben in eurer Pipeline. Der Editor erzeugt Inhalte; eure Infrastruktur entscheidet, wann sie live gehen.

Behaltet die volle Kontrolle

Open-Source-Kern, selbst gehostet, keine Preise pro Platz und kein aufgezwungener Editor. Eure Roadmap hängt von niemandem sonst ab.

Was eingebettet wird

Alles, was eure Nutzer brauchen – in eurer App

Ein Teil davon ist GrapesJS-Kern und funktioniert, sobald der Editor montiert ist. Ein Teil ist ein Plugin. Und ein Teil bleibt Aufgabe eurer Anwendung – jede Karte sagt, was davon zutrifft.

Kern

Visueller Canvas

Inhalte direkt in eurer Anwendung ziehen, ablegen, auswählen und bearbeiten. Teil des Editor-Kerns – verfügbar, sobald ihr ihn montiert.

Kern + Plugins

Blöcke

Wiederverwendbare Abschnitte und Komponenten. Definiert eigene aus dem Markup eures Produkts oder installiert ein fertiges Set.

Block-Plugins ansehen

Kern

Stil-Steuerung

Typografie, Abstände, Farben und responsive Breakpoints über den Style Manager – beschränkbar auf die Eigenschaften, die euer Designsystem erlaubt.

Kern + Plugins

Medienverwaltung

Richtet den Editor auf eure eigene Medienbibliothek aus oder bindet mit einem Medien-Plugin einen gehosteten Dienst an.

Medien-Plugins ansehen

Kern + Plugins

Speicherung

Speichert Projekte über den Remote Storage Manager in eurer API und Datenbank. Plugins ergänzen Autosave, Wiederherstellung und gehostete Backends.

Storage-Plugins ansehen

Kern + Plugins

Seiten

Mehrere Seiten pro Projekt. Der Kern liefert das Seitenmodell, Plugins die Verwaltungsoberfläche, die eure Nutzer sehen.

Multipage-Plugins ansehen

Eure App

Veröffentlichung

Exportiert HTML und CSS und übergebt es eurer eigenen Entwurfs- und Publishing-Pipeline. Der Editor veröffentlicht nie in eurem Namen.

Eure App

Berechtigungen

Welche Nutzer und Rollen was bearbeiten dürfen, entscheidet eure Anwendung – nicht der Editor. Sichert die Route ab und schränkt dann die Panels passend zur Rolle ein.

So funktioniert es

In 5 Schritten zum eingebetteten Editor

1
01
Installieren
Fügt den Editor eurem bestehenden Frontend hinzu. Eine Abhängigkeit, kein Dienst zum Registrieren, kein Schlüssel zu beantragen.
2
02
Montieren
Initialisiert GrapesJS auf einem Container innerhalb eurer eigenen App-Hülle. Er rendert dort, wo ihr ihn platziert, und übernimmt das Umfeld der Seite.
GrapesJS mit React Next.js-Page-Builder
3
03
Speicher anbinden
Richtet den Remote Storage Manager auf eure eigenen Endpunkte aus, damit jeder Speichervorgang in eurer Datenbank landet – authentifiziert über eure Session.
Speicherung
4
04
Plugins ergänzen
Installiert nur, was euer Produkt braucht – Blöcke, Seiten, Medien, Export, KI – und registriert eure eigenen Komponenten als Blöcke.
Blöcke Multipage KI
5
05
Veröffentlichen
Lest das erzeugte HTML und CSS aus dem Editor und schickt es durch die Entwurfs-, Review- und Publishing-Pipeline, die ihr bereits betreibt.
GrapesJS-Plugins

Startet mit dem Editor-Kern. Ergänzt nur die Funktionen, die euer Produkt wirklich braucht.

Schnellstart

Baut euren ersten eingebetteten Editor

Fünf Schritte echter Code. Bewusst frameworkunabhängig – die Details zu React und Next.js sind nur einen Link entfernt.

Installation

npm install grapesjs

Initialisierung

editor.jsJS

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

// Mount the editor on any container inside your own app shell.
const editor = grapesjs.init({
  container: '#editor',
  height: '100%',
  fromElement: false,
});

Speicherung

storage.jsJS

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

  // Persist to your API, not to a third-party service.
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
    options: {
      remote: {
        urlStore: '/api/projects/123',
        urlLoad: '/api/projects/123',
        // Your session, your authorization rules.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

Plugins & eigene Blöcke

plugins.jsJS

import grapesjs from 'grapesjs';
import blocksBasic from 'grapesjs-blocks-basic';

const editor = grapesjs.init({
  container: '#editor',
  plugins: [blocksBasic],
  pluginsOpts: {
    [blocksBasic]: { flexGrid: true },
  },
});

// Or register your own product's components as blocks.
editor.Blocks.add('pricing-table', {
  label: 'Pricing table',
  category: 'Your product',
  content: '<section class="pricing">…</section>',
});

Veröffentlichung

publish.jsJS

// Publishing stays in your infrastructure.
async function publish(projectId) {
  const html = editor.getHtml();
  const css = editor.getCss();

  await fetch(`/api/projects/${projectId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, css, status: 'published' }),
  });
}

Eigentum

Euer Editor. Euer Backend. Eure Daten.

Lest den Stack von oben nach unten und achtet darauf, wie viel davon längst euch gehört. GJS.Market liefert genau eine Schicht.

Frontend

Das Framework, das ihr bereits nutzt

React
Next.js
Vue
Angular
Reines JavaScript

Eingebetteter Editor

GrapesJS plus die Plugins eurer Wahl

Editor-Kern
Blöcke
Speicherung
Medien
Export

API
Eure REST- oder GraphQL-API
- Eure Authentifizierung
- Eure Validierung
- Eure Rate-Limits
Datenbank
Eure Datenbank, euer Schema
- Eure Backups
- Euer Speicherort
- Eure Aufbewahrung
Veröffentlichung
Eure Infrastruktur
- Eure Domains
- Euer CDN
- Euer Release-Prozess

GJS.Market liefert die Editor-Funktionen. Alles drumherum bleibt unter eurer Kontrolle.

Plugin-Ökosystem

Erweitert euren eingebetteten Editor mit produktionsreifen Plugins

Jedes Plugin hier unten ist ein echtes Angebot auf GJS.Market, mit aktuellem Preis. Installiert, was euer Produkt braucht, und lasst den Rest weg.

Speicherung

Projekte im eigenen Backend ablegen.

Speicherung

Grapesjs Firebase Storage

Speichert Editor-Projekte in Firebase, statt eine eigene Persistenzschicht zu schreiben.

Speicherung

Autosave & Restore — Crash Recovery for GrapesJS

Speichert während der Arbeit und stellt die Sitzung nach Absturz oder verlorenem Tab wieder her.

12,00 $Plugin ansehen

Blöcke

Fertige Inhaltsabschnitte ergänzen.

Blöcke

Plugin Blocky for Tailwind CSS

Eine produktionsreife Block-Bibliothek für Teams, deren Designsystem ohnehin Tailwind ist.

59,00 $Plugin ansehen

Blöcke

Plugin Basic Blocks

Die wichtigsten Layout- und Inhaltsblöcke, damit ein frischer Editor vom ersten Tag an nutzbar ist.

Multipage

Komplette mehrseitige Websites bauen.

Seiten

Pages Manager

Gibt Nutzern eine echte Seitenliste, sodass aus einem Projekt eine ganze Website wird.

25,00 $Plugin ansehen

Projekte

Grapesjs Project Manager

Lässt Nutzer mehrere Projekte parallel in eurer App verwalten.

White-Label

Das Editor-Erlebnis anpassen.

White-Label

Grapesjs Paneless

Eine überarbeitete Editor-Hülle für Teams, deren Oberfläche nicht mehr nach GrapesJS aussehen soll.

299,99 $Plugin ansehen

Medien

Eure Medienbibliothek anbinden.

Medien

Grapesjs Cloudinary

Liefert und transformiert Editor-Medien über Cloudinary.

Medien

Grapesjs Uppy

Bringt der Medienverwaltung ein richtiges Upload-Erlebnis.

Export

Steuern, wie Inhalte exportiert werden.

Export

Export Zip

Exportiert fertiges HTML, CSS und Medien als herunterladbares Archiv.

KI

KI-gestützte Bearbeitung ergänzen.

Grapesjs GPT Plugin

Erzeugt und überarbeitet Seitentexte, ohne den Canvas zu verlassen.

Integrationen

Den Editor mit eurem Stack verbinden.

Deployment

Grapesjs Netlify

Veröffentlicht direkt auf Netlify, wenn eure Ausgabe dorthin gehört.

Alle einbettbaren Plugins ansehen

Empfohlene Stacks

Stellt den Stack zusammen, den euer Produkt braucht

Vier Startpunkte, zusammengestellt aus Angeboten, die es heute gibt. Die Preise kommen live aus dem Katalog.

SaaS-Page-Builder

Seiten in eurem Dashboard

SaaS-Page-Builder bauen

Website-Builder

Ein vollwertiges Produkt zur Website-Erstellung

Website-Builder bauen

E-Mail-Builder

Kampagnen und transaktionale Mails

E-Mail-Builder bauen

CMS-Editor

Visuelles Bearbeiten strukturierter Inhalte

CMS-Editor bauen

Die Preise stammen vom Build-Zeitpunkt aus dem Marktplatz und können sich ändern. Jedes Plugin ist optional – der Editor-Kern ist kostenlos.

Anwendungsfälle

Wo lässt sich GrapesJS einbetten?

Derselbe Editor-Kern, durch die Plugins und Grenzen drumherum auf eine ganz andere Aufgabe ausgerichtet.

SaaS-Plattformen

Lasst Kunden Seiten in eurem Dashboard anlegen und bearbeiten, ohne das Produkt zu verlassen, für das sie bezahlen.

SaaS-Page-Builder

CMS

Gebt Content-Teams visuelles Bearbeiten, während euer Backend die strukturierten Daten behält, die es braucht.

Headless-CMS-Editor

CRM & Marketing-Plattformen

Lasst Nutzer Landingpages und Kampagnen-Assets dort bauen, wo sie ihre Zielgruppen ohnehin verwalten.

Landingpage-Builder

Website-Builder

Liefert ein komplettes Website-Erlebnis für eure Kunden – auf Basis eines Editors, den ihr nicht selbst schreiben musstet.

WYSIWYG-Page-Builder

E-Mail-Plattformen

Bettet einen visuellen E-Mail-Builder in den Kampagnen-Workflow ein, dem eure Nutzer bereits folgen.

E-Mail-Vorlagen-Builder

KI-Website-Builder

Erzeugt einen ersten Entwurf per KI und lasst Nutzer ihn visuell verfeinern, statt erneut zu prompten.

KI-Plugins

Interne Tools

Gebt internen Teams einen visuellen Editor für die Oberflächen, die sie verantworten – ohne einen von Grund auf zu bauen.

No-Code-Builder für Entwickler

Headless-Plattformen

Legt eine visuelle Schicht über die Architektur, für die ihr euch längst entschieden habt, statt sie zu ersetzen.

Open-Source-Page-Builder

Framework-Unterstützung

Bettet ihn in den Stack ein, den ihr schon nutzt

GrapesJS läuft im Browser und montiert sich auf einen DOM-Knoten – die Integration ist also nur eine dünne Hülle um das, was ihr ohnehin ausliefert.

React

Baut einen visuellen Editor direkt in eure React-Anwendung.

React-Page-Builder ansehen

Next.js

Bettet den Editor in eine Next.js-App ein – clientseitig geladen, damit er SSR nie berührt.

Next.js-Anleitung ansehen

Vue

Montiert den Editor aus einer Vue-Komponente und steuert ihn über die Lifecycle-Hooks.

Vue-Page-Builder ansehen

Angular

Initialisiert den Editor aus einer Angular-Komponente und verbindet ihn mit euren Services.

Angular-Builder ansehen

Reines JavaScript

Ganz ohne Framework – ein Script-Tag und ein Container-Element genügen.

HTML-Drag-and-drop-Builder ansehen

Selbst bauen oder einbetten

Was es wirklich heißt, ihn selbst zu bauen

Ein visueller Editor ist kein Feature. Es sind ein Dutzend Subsysteme, die zusammenspielen müssen – und weiter funktionieren müssen, während sich Browser verändern.

Subsysteme, die ein selbst gebauter Editor bedeutet

Editor-Architektur
Canvas & iframe-Isolation
Drag and drop
Block-System
Style Manager
Ebenen-Baum
Undo-/Redo-Historie
Speicherung & Autosave
Medienverwaltung
Multipage-Modell
Responsives Bearbeiten
HTML-/CSS-Export
Browserübergreifende Tests
Laufende Wartung

Von Grund auf bauen

Monate an Entwicklungsarbeit

Jedes Subsystem oben müsst ihr selbst entwerfen, bauen und testen
Der Editor wird zu einem Produkt, das euer Team dauerhaft pflegt
Browser- und Framework-Updates werden zu eurem Problem
Roadmap-Kapazität fließt in Editor-Infrastruktur statt in euer Produkt

GrapesJS + GJS.Market

In Tagen startklar

Open-Source-Editor-Kern, bereits gelöst und in der Praxis erprobt
Fertige Plugins für Speicherung, Blöcke, Seiten, Medien und Export
Eure eigenen Komponenten als Blöcke registriert
Eure API, eure Daten und euer Publishing-Prozess bleiben unverändert

Gleiches Ziel. Der eine Weg steckt eure Roadmap in Editor-Infrastruktur, der andere in euer Produkt.

Warum GrapesJS

Warum GrapesJS als eingebetteten Editor nutzen?

Es wurde fürs Einbetten entworfen – deshalb sind die Erweiterungspunkte, die ihr braucht, bereits vorhanden.

Open Source

Der Kern steht unter der BSD-3-Clause-Lizenz – permissiv, kommerziell nutzbar und lesbar, wenn ihr genau wissen müsst, was er tut.

Selbst gehostet

Der Editor läuft in eurer eigenen Anwendungsinfrastruktur. Es gibt keinen Dienst, der aufgerufen wird, und keine Verfügbarkeit, die nicht ohnehin eure ist.

Erweiterbar

Eigene Komponenten, Blöcke, Befehle, Panels und Plugins sind erstklassig unterstützt. Die Oberfläche eures Produkts kann selbst zu bearbeitbarem Inhalt werden.

Framework-freundlich

React, Next.js, Vue, Angular und reines JavaScript. Der offizielle @grapesjs/react-Wrapper steht unter der MIT-Lizenz.

Kein Vendor-Lock-in

Eure Anwendung, eure Daten und eure Infrastruktur bleiben unter eurer Kontrolle. Die Ausgabe ist schlichtes HTML und CSS, das ihr überall rendern könnt.

Plugin-Ökosystem

Erweitert den Editor mit 100+ Angeboten auf GJS.Market, statt jede Funktion selbst zu schreiben.

GrapesJS entdecken

26k+

GitHub-Sterne

100+

Plugins auf GJS.Market

10 years

Aktive Entwicklung

Lizenzgebühr, immer

Macht ihn zu eurem

Lasst den Editor wie euer Produkt wirken

Branding
Eigene Oberfläche
Eigene Komponenten
Eigene Blöcke
Berechtigungen
Nutzerrollen
Vorlagen
Medienbibliothek
Publishing-Prozess
Eigene APIs

Eure Nutzer sollen das Gefühl haben, euer Produkt zu benutzen – nicht einen fremden Editor.

White-Label-Page-Builder entdecken

FAQ

GrapesJS einbetten – häufige Fragen

Loslegen

Bettet einen visuellen Editor in euer Produkt ein

Startet mit dem Open-Source-Editor GrapesJS und erweitert ihn um die Plugins, die euer Produkt braucht.

Am beliebtesten

GJS.Market-Plugins ansehen

Speicherung, Blöcke, Seiten, Medien, Export und KI – produktionsreife Angebote mit aktuellen Preisen.