PageKit — der selbst gehostete GrapesJS-Website-Builder, als Quellcode. Early Access sichern

White-Label-Seiten-Builder

White-Label-Seiten-Builder mit GrapesJS

Baue einen vollständig gebrandeten visuellen Seiten-Builder für deine SaaS, Agentur oder Plattform. Passe die Editor-Oberfläche an, kontrolliere Benutzer und Berechtigungen, verwalte Mandantendaten und veröffentliche über deine eigene Infrastruktur.

Vollständig anpassbarSelbstgehostetMulti-Tenant bereitBenutzerdefinierte Blöcke & VorlagenIhre Daten & Infrastruktur
IIhre Marke
  • Dashboard
  • Seiten
  • Vorlagen
  • Assets
  • Einstellungen
Seiten / FrühjahrsstartVorschauVeröffentlichen

Blöcke

  • Hero
  • Funktionen
  • Preise
  • FAQ
  • CTA

Stile

  • Abstand
  • Typografie
  • Farbe
  • Layout
Die Editor-Engine ist in beiden Frames gleich. Alles, was ein Kunde liest – die Navigation, die Labels, die Blocknamen, die Buttons – gehört zu deinem Produkt.
Sieh dir das Produkt an

Drei Editoren. Eine Engine.

Keiner dieser drei sieht aus wie die anderen, und alle drei sind darunter dieselbe visuelle Bearbeitungs-Engine. Das ist das ganze White-Label-Konzept: Die Engine ist eine Abhängigkeit, die Benutzeroberfläche ist dein Produkt. Lade eine und klicke herum, bevor du ein weiteres Wort liest.

In einem neuen Tab öffnen

Die Standard-Demo, ungestylt und ohne Branding. Das ist der Ausgangspunkt, von dem jeder White-Label-Build ausgeht – und der, den Ihre Kunden niemals sehen sollten.

grapesjs.com/demo.htmlReferenz

Die Demo lädt erst nach einem Klick in einem eingebetteten Frame, sodass die Seite selbst leicht bleibt.

Vorher / Nachher

Vom generischen Editor zu deinem Produkt

White-Labelling wird üblicherweise als Logo-Tausch beschrieben. Das ist es nicht. Vergleichen Sie die beiden folgenden Frames: gleiche Leinwand, gleiche Drag-and-Drop-Steuerung, gleiche Stilsteuerung – und zwei völlig unterschiedliche Produkte aus der Sicht der Person, die sie nutzt.

Unbetitelter Herausgeberin
  • Start
  • Dokumente
  • Bibliothek
  • Dateien
  • Optionen
Dokument-1AnsichtSpeichern

Elemente

  • Abschnitt
  • Spalte
  • Text
  • Bild
  • Schaltfläche

Eigenschaften

  • Marge
  • Taufbecken
  • Hintergrund
  • Anzeige
Wechsel das Bild zum Vergleich. Das Layout ist in beiden Zuständen absichtlich identisch – nur die Identität ändert sich.

Vorher

Ein generischer Editor

  • Standard-Benutzeroberfläche und Panel-Layout
  • Generische Elementnamen, die deine Nutzer lernen müssen
  • Generische Startervorlagen, die zu keinem bestimmten Produkt passen
  • Vokabular, das vom Editor übernommen wurde, nicht aus deiner Domain
  • Keine Beziehung zum Rest deiner Bewerbung
  • Support-Fragen, die eigentlich Editor-Fragen sind

Danach

Ihr Marken-Builder

  • Ihr Logo, Ihre Farben und Ihre Typografie
  • Deine Navigation, der den Editor als einen weiteren Bildschirm umhüllt
  • Ihre Blöcke, benannt nach den Dingen, die Ihre Kunden tatsächlich bauen
  • Deine Vorlagen, Meinungen zu deinem Anwendungsfall
  • Deine Terminologie, in jedem Etikett und leeren Zustand
  • Deine Berechtigungen bestimmen, was jeder Nutzer sehen und tun kann
  • Ihr Veröffentlichungs-Workflow endet dort, wo Ihre Infrastruktur anfängt

Ihre Nutzer sollten das Gefühl haben, Ihr Produkt zu benutzen – nicht als einen Drittanbieter-Editor, der zufällig darin eingebettet ist.

Definition

Was ist ein White-Label-Seiten-Builder?

Ein White-Label-Seiten-Builder ist ein visuelles Seitenbearbeitungssystem, das in ein anderes Produkt integriert und an seine Marke, das Nutzererlebnis und die Geschäftsregeln angepasst werden kann.

Der Begriff stammt aus der Fertigung, wo ein White-Label-Produkt von einem Unternehmen hergestellt und unter dem Namen eines anderen Unternehmens verkauft wird. Auf Software angewandt bedeutet das, dass die Bearbeitungs-Engine eine Abhängigkeit ist, die Ihr Team auswählt, und alles, was der Kunde wahrnimmt – die Benutzeroberfläche, der Wortschaschatz, die Inhaltsbibliothek, die Regeln, wer was tun darf – gehört Ihnen. Ein White-Label-Page-Builder ist daher weniger ein Produkt, das Sie installieren, als vielmehr ein Produkt, das Sie selbst zusammenstellen.

Welche White-Label-Abdeckungen eigentlich

  • Branding
  • Editor UI
  • Blöcke
  • Vorlagen
  • Komponenten
  • Benutzerrollen
  • Berechtigungen
  • Speicher
  • Assets
  • Veröffentlichung
  • Benutzerdefinierte Domänen
  • Produktterminologie

White-Label ist mehr als nur ein Logo zu ändern. Jeder oben genannte Punkt ist eine Entscheidung darüber, wem eine Ebene des Erlebnisses gehört – und ein Erbauer, der beim Logo aufhört, ist immer noch das Werkzeug von jemand anderem.

Eigentum

Ihre Marke. Ihre Daten. Ihre Infrastruktur.

Ein White-Label-Build ist ein Stapel von Schichten, und es lohnt sich, genau zu sagen, welche davon eine visuelle Bearbeitungsmaschine liefern kann und welche nicht. Lesen Sie den Stapel von oben nach unten: was Ihr Kunde sieht, bis hin zu dem Ort, an dem sich die veröffentlichte Seite schließlich befindet.

  1. Ihr ProduktIhr Produkt
  2. Deine MarkeIhr Produkt
  3. White-Label-EditorEditor-Engine
  4. ErweiterungenPlugins
  5. Deine DatenIhr Produkt
  6. Dein BackendIhr Produkt
  7. Ihre VerlagsinfrastrukturIhr Produkt
Ihr Produkt

Ihr Produkt

Die Anwendung, in die sich Ihr Kunde einloggt. Alles darunter wird über sie erreicht, weshalb der Builder als Funktion und nicht als Werkzeug gelesen wird.

Ihr Produkt

Deine Marke

Identität, Ton und Vokabular. Angewendet auf die Editor-Shell, die Blocknamen und jede Zeichenkette, die ein Benutzer liest.

Editor-Engine

White-Label-Editor

Die visuelle Bearbeitungs-Engine: Leinwand, Komponenten, Drag-and-Drop, Stilsteuerung, responsive Bearbeitung, Serialisierung. Open Source, selbstgehostet und bis auf Panel-Ebene anpassbar.

Plugins

Erweiterungen

Blöcke, Vorlagen, Presets, Speicheradapter, Asset-Integrationen und Exportbefehle, die das ausfüllen, was der Core absichtlich offen lässt.

Ihr Produkt

Deine Daten

Projekte, Seiten, Überarbeitungen und Assets, in deinem Schema und in deiner Datenbank. Der Editor serialisiert ein Projekt; wo dieses Projekt geschrieben wird, liegt bei dir.

Ihr Produkt

Dein Backend

Konten, Organisationen, Rollen, Berechtigungen, Abrechnung und das API, mit dem der Editor spricht. Keine Bearbeitungsmaschine kann das liefern, weil es deine Geschäftslogik ist.

Ihr Produkt

Ihre Verlagsinfrastruktur

Rendering, Hosting, Caching, Domains und Zertifikate für die Seiten, die Ihre Kunden versenden.

Die Editor-Engine ist die einzige Ebene, die du nicht aufbauen musst. Jede zweite Schicht ist der Ort, an dem sich dein Produkt tatsächlich abhebt – was ein guter Grund ist, nicht ein Jahr damit zu verbringen, das bereits gelöste Produkt neu aufzubauen.

Kontrollübersicht

Welche Ebene steuert was

Derselbe Stack, aufgelistet. Drei Spuren: Was dir die Engine direkt bietet, was eine Erweiterung bieten kann und was nur deine Anwendung besitzen kann. Die dritte Spur ist die ehrliche – und dort stellt ein Unternehmenskäufer seine Fragen.

Ihre Anwendung
  • Benutzer & KontenIdentität, Sitzungen, Onboarding
  • BerechtigungenWer bearbeiten, genehmigen und veröffentlichen darf
  • Mehrfach-MietverhältnisseIsolation zwischen Kunden
  • GenehmigungsworkflowEntwurf, Überprüfung und Veröffentlichung von Staaten.
  • PrüfungsspurWer was verändert hat und wann
  • Benutzerdefinierte DomänenDNS, Zertifikate, Routing
  • Abrechnung & PläneVerpackung, Limits, Abonnements
Editor-Engine
  • Visuelle LeinwandLive-Darstellung der zu bearbeitenden Seite
  • Drag & DropPlatzierung, Verschachtelung und Neuordnung
  • StilsteuerungTypografie, Abstand, Farbe, Layout
  • Responsive BearbeitungBearbeitung pro Breakpoint
  • Panels & WerkzeugleisteEditor Chrome, konfigurierbar und austauschbar
  • KommandosBenutzerdefinierte Aktionen, die an deine eigenen Buttons gebunden sind
  • Editor-SpracheInterface-Strings, übersetzbar
Plugin- oder benutzerdefinierter Code
  • Branding & ThemaLogo, Farben, Typografie, Symbole
  • BlockbibliothekDie Abschnitte, mit denen Ihre Nutzer schreiben
  • VorlagenAusgangspunkte pro Anwendungsfall
  • Asset-BibliothekUploads, Medienspeicherung, Bildwerkzeuge
  • ProjektlagerungWo ein Projekt gelesen und geschrieben wird
  • ExportMarkup, Archive, strukturierte Projektdaten

Nichts in der rechten Spur ist eine Lücke im Editor – diese Fähigkeiten hängen von deinen Konten, deinem Mietmodell und deiner Infrastruktur ab, sodass keine Bearbeitungsmaschine sie für dich entscheiden kann.

Kundenerlebnis

Was Ihre Kunden sehen

Dein Kunde öffnet nie einen Editor. Er öffnet dein Produkt, geht auf deren Seiten, wählt eine Vorlage und beginnt mit dem Bearbeiten – und die Bearbeitungsmaschine ist zufällig das, was die Leinwand mitten in dieser Reise zeichnet.

Die Reise, die Ihr Kunde tatsächlich unternimmt

  1. Dein Dashboard
  2. Seiten
  3. Wähle eine Vorlage
  4. Visueller Editor
  5. Anpassen
  6. Vorschau
  7. Veröffentlichen
Jeder Schritt dieses Flows ist ein Bildschirm deiner Anwendung. Nur einer von ihnen rendert eine Bearbeitungsleinwand, und selbst dieser befindet sich in deiner Navigation, deinem Header und deinen Berechtigungen.

GrapesJS kann im Hintergrund arbeiten, während Ihre Kunden mit Ihrem Produkterlebnis interagieren.

Architektur

Wie man einen White-Label-Seiten-Builder erstellt

Architektonisch ist die Trennung sauber, und sie sauber zu halten, macht den Build wartbar. Deine Anwendung besitzt Identität, Mandanten und Geschäftsregeln. Der Page Builder ist eine Funktion dieser Anwendung. Die Bearbeitungs-Engine ist eine Bibliothek, von der diese Funktion abhängt.
  1. Your SaaS

    Ihr Produkt, wobei der Builder ein von mehreren Funktionen ist.

  2. Application layer

    Authentifizierung, Organisationen, Abrechnung, Benutzer und Berechtigungen – der Kontext, in dem jede Bearbeitungssitzung läuft.

  3. Page Builder

    Die Funktion des Page Builders: Projektladen, Speichern, Vorlagenauswahl, Veröffentlichungstrigger.

  4. GrapesJS

    Die visuelle Bearbeitungsebene – Leinwand, Komponenten, Blöcke, Ebenen, Stile, Assets und Befehle.

    • Canvas
    • Components
    • Blocks
    • Layers
    • Styles
    • Assets
    • Commands

GrapesJS übernimmt die visuelle Bearbeitungsebene. Ihre Anwendung übernimmt die Geschäftslogik darum herum – und die Grenze zwischen beiden ist die wichtigste Designentscheidung im gesamten Build.

Sehen Sie, wie es funktioniert

Was deine Bewerbung zur Grenze bringt

  • Authentifizierung
  • Organisationen
  • Abrechnung
  • Nutzer
  • Berechtigungen
Mandantenfähigkeit

Baue einen Multi-Tenant-White-Label-Seiten-Builder

Wenn mehr als ein Kunde Ihren Builder nutzt, hört Tenancy auf, ein Implementierungsdetail zu sein. Jede Organisation benötigt ihre eigenen Seiten, ihre eigene Asset-Bibliothek, eigene Vorlagen und ihre eigene Marke – und muss strukturell nicht in der Lage sein, die von anderen zu erreichen.

Deine Plattform

Er besitzt die Mandantengrenze und setzt sie bei jeder Anfrage durch

  • Org A

    • Seiten
    • Assets
    • Vorlagen
    • Marke
  • Org B

    • Seiten
    • Assets
    • Vorlagen
    • Marke
  • Org C

    • Seiten
    • Assets
    • Vorlagen
    • Marke
Das Fan-Out erfolgt in deiner Anwendung. Der Editor wird pro Sitzung mit dem jeweiligen Projekt, den Assets und dem Blocksatz instanziiert, auf den der Tenant Anspruch hat.
  • Mandantenisolation

    Jedes Projekt, jedes Asset und jede Vorlagenzeile ist auf eine Organisation zugeschnitten, und der Umfang wird serverseitig angewendet – nicht durch Filterung im Browser.

  • Projekte

    Die Seiten eines Tenants sind Zeilen in deiner Datenbank. Der Editor lädt jeweils ein Projekt und schreibt es über dein API zurück.

  • Asset-Bibliotheken

    Uploads landen in einem Präfix oder Bucket pro Mandant, sodass das Medium eines Kunden niemals im Picker eines anderen Kunden auftauchen kann.

  • Template-Sets

    Vorlagen können global, tarifspezifisch oder privat für eine Organisation sein, was oft genau das ist, was ein Plan-Upgrade tatsächlich freischaltet.

  • Pro Mandant-Branding

    Farben, Schriftarten und Logos lösen sich je nach Organisation auf, sodass die Kunden einer Agentur jeweils ihre eigene Identität in derselben Implementierung sehen.

  • Veröffentlichungsziele

    Wo die Seiten eines Tenants veröffentlicht werden – Pfad, Subdomain oder benutzerdefinierte Domain – ist die Konfiguration, die deine Anwendung auflöst.

GrapesJS hat kein eingebautes Konzept von Tenants. Es bearbeitet jeweils ein Projekt; die Isolation, das Scoping und die Berechtigungsprüfungen rund um dieses Projekt werden in Ihrer Anwendung implementiert und von Ihrem Backend durchgesetzt.

Branding

Lass den Editor wie dein Produkt aussehen

Die Anpassung geht tiefer, als die meisten Teams planen. Diese vier Stufen sind nach ihrer Sichtbarkeit geordnet, nicht nach dem Aufwand, den sie erfordern – und die letzte ist diejenige, die ein umbenanntes Tool von einem Produkt trennt, das sich eigenständig anfühlt.

  • 01

    Visuelle Identität

    Die Schicht, mit der jeder beginnt. Notwendig und allein nie ausreichend.

    • Logo
    • Farben
    • Typografie
    • Icons
  • 02

    Editor UI

    Das Chrom um die Leinwand. Paneele können umgestellt, ersetzt oder durch eigene Komponenten gerendert werden.

    • Panels
    • Symbolleiste
    • Navigation
    • Befehle
    • Menüs
  • 03

    Inhaltssystem

    Was Nutzer tatsächlich auf einer Seite platzieren können. Hier hört ein Builder auf, generisch zu sein.

    • Blöcke
    • Komponenten
    • Vorlagen
    • Presets
  • 04

    Produktsprache

    Die Worte. Ein Nutzer, der Ihren Wortschatz überall liest, bemerkt nie, dass sich darunter ein Engine befindet.

    • Bezeichnungen
    • Terminologie
    • Benutzerflüsse
    • Onboarding

Die Interface-Strings des Editors sind übersetzbar und die Panels konfigurierbar, sodass die ersten beiden Level Konfiguration und keine Forks sind. Der Kern ist BSD-3-Clause-lizenziert und selbstgehostet, was die tieferen Levels überhaupt möglich macht.

Zugangskontrolle

Gib jedem Nutzer das richtige Maß an Kontrolle

Ein Entwickler, der an Teams ausliefert, benötigt mehr als eine Art von Nutzer. Diese fünf Rollen decken die meisten Produkte ab; die Namen sind weniger wichtig als die Tatsache, dass jedes einzelne auf einen anderen Satz sichtbarer Panels, verfügbarer Blöcke und Veröffentlichungsrechte beschränkt ist.

  • Besitzer

    Vollzugriff, einschließlich Abrechnung und Löschung

  • Administrator

    Benutzer, Einstellungen und Veröffentlichung

  • Designer

    Layouts, Stile und Vorlagen

  • Redakteur

    Inhalte innerhalb genehmigter Blöcke

  • Betrachter

    Schreibzugriff und Vorschauen

Wie eine Genehmigung auf die Leinwand gelangt

  1. Nutzer
  2. Rolle
  3. Berechtigungen
  4. Sichtbare Panels
  5. Verfügbare Blöcke
  6. Veröffentlichungsrechte

Lesen Sie die Kette von oben nach unten: Die ersten drei Schritte finden in Ihrer Anwendung statt, und nur die letzten drei sind die Editor-Konfiguration. Das Ausblenden eines Panels ist eine Rendering-Folge einer bereits getroffenen und serverseitig durchgesetzten Entscheidung – eine Berechtigung, die nur im Browser existiert, ist keine Berechtigung.

Governance

Vom Entwurf zur veröffentlichten Seite

In einem Single-User-Tool sind Bearbeiten und Veröffentlichen dieselbe Aktion. Bei einem Produkt, das an Teams verkauft wird, sind es separate Bundesstaaten mit getrennten Rechten – und diese Trennung ist meist das Erste, wornach ein Unternehmenskäufer fragt.

  1. 1

    Entwurf

    In Ihrer Datenbank existiert eine Seite ohne öffentliche Vertretung.

  2. 2

    Bearbeitung

    Jeder, der Bearbeitungsrechte an diesem Projekt hat, arbeitet im Canvas.

  3. 3

    Prüfung

    Der Entwurf wird als Vorschau geteilt, wobei die Kommentare von deinem Produkt bearbeitet werden.

  4. 4

    Genehmigen

    Ein Nutzer mit Genehmigungsrechten unterschreibt. Die Statusänderung liegt bei dir.

  5. 5

    Veröffentlichen

    Deine Infrastruktur rendert und liefert die Seite aus. Die Rolle des Editors ist beendet.

Markierte Stufen sind die Orte, an denen eine Autorisierungsprüfung gehört.

Redakteure können Inhalte erstellen, während nur autorisierte Nutzer sie veröffentlichen dürfen – ein Satz, der überraschend viele Geschäftsabschlüsse entscheidet.

Inhaltssystem

Baue dein eigenes Inhaltssystem

Der Kern liefert absichtlich eine leere Blockpalette: Ein generisches Blockset wäre für jedes Produkt, in das es geworfen wurde, falsch. Was du in diese Palette einfügst, ist die produktspezifischste Entscheidung im ganzen Build.

  • Hero

    Dein Eröffnungsabschnitt, mit den Feldern, die dein Produkt tatsächlich verwendet.

  • Preise

    Plane Tabellen, die aus deinen eigenen Preisdaten ablesen können.

  • Erfahrungsberichte

    Social Proof legt dar, wie Ihre Marke es präsentiert.

  • Funktionsraster

    Ein wiederholbares Raster, das Ihre Nutzer nicht versehentlich brechen dürfen.

  • FAQ

    Frage-und-Antwort-Paare, erweiterbar auf der veröffentlichten Seite.

  • Kontakt

    Ein Formular, das an Ihren Endpunkt verkabelt ist, nicht an das eines Drittanbieters.

  • CTA

    Der Conversion-Block, der auf deine Button-Stile festgelegt ist.

  • Footer

    Ein gemeinsamer Footer, der auf jeder Seite einheitlich bleibt.

Vorlagen

Gib jeder neuen Seite einen Ausgangspunkt

Vorlagen sind die Art und Weise, wie ein Bauer seinen Nutzern beibringt, wie gut aussieht. Eine leere Leinwand wirkt einschüchternd; ein Vorlagenset, das um die Aufgaben Ihrer Kunden herum gebaut ist, ist ein Produktfeature.

Templates Sorten, die es wert sind zu verschicken,

  • Onboarding-Seite
  • Kampagnenseite
  • Produktseite
  • Preisseite
  • Dokumentationsseite
  • Veranstaltungsseite
  • Kundenportal-Seite
  • Kunden-Microsite

Das sind Arten von Vorlagen, die ein Bauer typischerweise aussendet, keine Kataloglisten. Was dein Set enthält, sollte auf dem basieren, was deine Kunden am häufigsten veröffentlichen.

Gib den Nutzern keinen generischen Editor. Gib ihnen einen Editor, der auf dein Produkt zugeschnitten ist.

Veröffentlichung

Lassen Sie Kunden unter ihrer eigenen Marke veröffentlichen

Für Agenturen und Website-Plattformen ist die veröffentlichte Seite mit der eigenen Domain des Kunden das Produkt. Es handelt sich auch ausschließlich um eine Infrastrukturangelegenheit – es lohnt sich, frühzeitig zu entwerfen, denn das Nachrüsten von Domain-Routing in einen Live-Builder ist unangenehm.

  1. Deine Plattform
  2. Kundenarbeitsbereich
  3. Benutzerdefinierte Domäne
  4. Veröffentlichte Seite
Der Editor erstellt die Seite. Alles vom Arbeitsbereich nach rechts ist dein Hosting, dein Routing und dein Zertifikatshandhabung.
  • Eine Domäne ist eine Tenant-Konfiguration

    Speichere den Hostnamen im Arbeitsbereich, verifiziere die Eigentümerschaft und leite dann eingehende Anfragen darauf an die veröffentlichten Seiten dieses Tenants weiter.

  • Zertifikate stehen zur Automatisierung zur Verfügung.

    Das Ausstellen und Erneuern von Zertifikaten pro Kundendomain liegt in der Plattformverantwortung, egal ob Sie es selbst ausführen oder an einen Host delegieren.

  • Veröffentlichen kann ein Einsatz sein

    Einige Teams rendern Seiten aus ihrer eigenen Datenbank; andere übertragen die generierte Ausgabe auf einen statischen Host. Beide Muster funktionieren, und eine Plugin-Familie automatisiert bereits die zweite.

  • Vorschau vor der Existenz der Domain

    Gib jeder Seite von Anfang an eine plattformgehostete Vorschau-URL, damit Überprüfung und Genehmigung nie auf DNS warten.

Keine visuelle Bearbeitungsbibliothek bietet Domain-Hosting an. GrapesJS emittiert Seiten; DNS, Zertifikate, Routing und Caching bleiben bei Ihrer Infrastruktur oder Ihrem Hosting-Anbieter.

Verantwortlichkeit

Wissen, wer was geändert hat

Sobald zwei Personen dieselbe Seite bearbeiten können, wird jemand fragen, wer sie geändert hat. Ein Aktivitätspfad ist günstig hinzuzufügen, während man das Speichern und Veröffentlichen entwirft, und teuer, um sie danach wieder zu rekonstruieren.

Tätigkeit

  • AlexBearbeitet · Startseite12:42
  • MariaVeröffentlicht · LandingpageVeröffentlicht13:07
  • JohnGeändert · Preisabteilung13:21

Was man bei jedem Eintrag aufnehmen sollte

  • Schauspieler
  • Aktion
  • Projekt
  • Version
  • Zeitstempel
  • Mandant

Illustrative Zeilen. GrapesJS hat kein Audit-Log; die Spur wird von Ihrer Anwendung geschrieben, wenn sie einen Speicherstand, eine Genehmigung oder eine Veröffentlichung verarbeitet, was auch der einzige Ort ist, an dem bekannt ist, welcher Benutzer handelt.

Plugin-Stack

Baue deinen White-Label-Seiten-Builder-Stack auf

Lesen Sie den Stack als Build-Reihenfolge. Jede Sprosse wird entweder von der Engine geliefert, ist als Plugin verfügbar oder arbeitet, die nur Ihr Team erledigen kann – und ehrlich zu sein, was das ist, was eine Schätzung den Kontakt mit dem Projekt überstehen lässt.

  1. Editor-EngineOpen Source
  2. White-Label-Theme & benutzerdefiniertes UIPlugin
  3. Benutzerdefinierte BlöckePlugin
  4. VorlagenPlugin
  5. Rollen & BerechtigungenDeine App
  6. SpeicherPlugin
  7. AssetsPlugin
  8. AuditprotokolleDeine App
  9. ExportPlugin
  10. VeröffentlichungPlugin

Zwei Sprossen haben keine Katalog-Antwort, und das ist beabsichtigt und kein Versehen: Rollen und Audit-Logging hängen von deinem Identitätsmodell und deiner Datenbank ab, also sind sie Anwendungsarbeit. Wenn das der Teil ist, den dein Team lieber nicht allein bauen möchte, dann gibt es genau dafür Implementierungsdienste.

Marktplatz

Plugins für jede Ebene des Stacks

Jede untenstehende Listing ist ein echtes Produkt auf GJS.Market, gruppiert nach der Aufgabe, die es in einem White-Label-Build erfüllt.

Ausgangspunkte

Beginnen Sie mit einem Stack, der zu Ihrem Produkt passt

Drei Kombinationen, die immer wieder auftauchen. Keine davon ist ein Bündel – sie sind Ausgangspunkte, und jede einzelne braucht immer noch deine Anwendung darum herum.

Die Preise sind die Marktplatzpreise zum Bauzeitpunkt und werden zur Orientierung angezeigt.

Make or Buy

Beginnen Sie mit GrapesJS. Fügen Sie das hinzu, was Ihr Produkt benötigt.

GrapesJS bietet die Grundlage für visuelles Bearbeiten. GJS.Market-Plugins können spezialisierte Funktionen hinzufügen, ohne dass dein Team jede Funktion intern bauen muss. Beide unten genannten Wege sind legitim – die Frage ist, welche Teile des Stacks wirklich dein Unterscheidungsmerk sind.

Bau alles selbst

Volle Kontrolle über jede Leitung, bezahlt in der Ingenieurzeit, zahlst du weiter.

Was du auf dich nimmst

  • Mehr Ingenieurskunst, auf einer Oberfläche, die nicht dein Produkt ist
  • Mehr Wartung, da Browser und Frameworks sich weiterentwickeln
  • Noch mehr interner Code, den niemand außerhalb deines Teams überprüft
  • Editor-Bugs konkurrieren mit der Roadmap-Arbeit um Aufmerksamkeit

Genau dann, wenn das Bearbeitungsverhalten selbst dein Unterscheidungsmerkmal ist.

Sprechen Sie durch das Teleskop

Erweiterung mit Plugins

Übernimm das, was gelöst ist, und investiere deine Technik in das, was dir gehört.

Wie die Schleife aussieht

  • Installiere ein Plugin, das eine Sprosse des Stacks abdeckt
  • Konfiguriere es gegen deine Daten und dein API
  • Passe die Teile an, die dein Produkt besitzen muss
  • Versand und halte dein Team bei Mietverträgen, Genehmigungen und Veröffentlichungen

Genau dann, wenn dein Unterscheidungsmerkmal das Produkt um den Editor herum ist.

Durchsuchen von Plugins
Vergleich

White-Label-Editor selbst bauen vs. GrapesJS

Feature für Feature, was du selbst im Vergleich zu dem schreiben würdest, was eine etablierte Engine bereits offenlegt. Die als Anwendungsebene markierten Zeilen sind die ehrliche Hälfte dieser Tabelle: Eine Bearbeitungs-Engine kann sie nicht besitzen, also liegen sie auf deinem Teller.

LeistungsfähigkeitVon Grund aufGrapesJS
Visuelle LeinwandBauEnthalten
Drag & DropBauEnthalten
KomponentenBauEnthalten
BlöckeBauErweiterbar
DesignBauEnthalten
Responsive BearbeitungBauEnthalten
Custom UIBauErweiterbar
AssetsBauErweiterbar
SpeicherBauErweiterbar
BerechtigungenBauAnwendungsschicht
Mehrfach-MietverhältnisseBauAnwendungsschicht
VeröffentlichungBauAnwendungsschicht
PluginsBauErweiterbar

Die Urteile spiegeln die aktuelle Version wider, neu verifizierte 2026-09-02. "Anwendungsschicht" bedeutet, dass die Funktion von deinen Konten und Infrastruktur abhängt, nicht dass sie fehlt.

Bauen Sie Ihre Geschäftslogik und Ihr Markenerlebnis auf. Bauen Sie die visuelle Bearbeitungs-Engine nicht neu auf.

Benachbarte Modelle

White-Label vs. Embeddable vs. SaaS-Seiten-Builder

Drei verwandte Entscheidungen, die besprochen werden, als wären sie eins. Sie stapeln sich, statt zu konkurrieren: Die meisten Produkte machen am Ende alle drei in dieser Reihenfolge.

Kommerziell

Verwandle deinen Page Builder in ein Produkt

Sobald der Bauunternehmer Ihnen gehört, ist auch die geschäftliche Beziehung darum herum. Wie Sie es gestalten, ist eher eine geschäftliche als eine technische – aber es lohnt sich, sie zu treffen, bevor das Mietmodell in Beton festgelegt wird, denn Pläne und Begrenzungen sind Mietfragen.

  1. Ihr Produkt
  2. Visueller Editor
  3. Kundenarbeitsbereich
  4. Abonnement
  5. Ihr Umsatz
Du besitzt jeden Schritt dieser Kette, einschließlich der Preisgestaltung und der Kundenbeziehung am Ende.
Verpackung

Eine Möglichkeit, einen Builder zu verpacken

Eine konventionelle vierstöckige Form, die die Mietvertragsimplikationen konkret macht, anstatt eine Preisliste vorzulegen.

  1. 01

    Kostenlos

    Ein Arbeitsbereich, ein kleines Seitenlimit, plattformgehostete Vorschau-URLs.

  2. 02

    Pro

    Mehr Seiten, das komplette Template-Set, eine eigene Domain.

  3. 03

    Team

    Mehrere Sitze, Rollen und ein Genehmigungsschritt vor der Veröffentlichung.

  4. 04

    Unternehmen

    Mehrere Organisationen, eine Audit-Spur, individuelle Blöcke und Unterstützungsbedingungen.

Nur illustrativ. Was zu welcher Stufe gehört, hängt von Ihrem Markt ab – aber beachten Sie, wie viel der Leiter aus den Erlaubnis- und Mietfunktionen von zuvor auf dieser Seite besteht.

Sie kontrollieren Ihre Preisgestaltung, Ihre Pläne und Ihre Kundenbeziehung.

Fundament

Warum mit einem Open-Source-Editor anfangen?

Ein White-Label-Build stellt Anforderungen, die ein geschlossener Editor nicht erfüllen kann. Du musst die Schnittstelle ändern, sie auf deiner eigenen Infrastruktur ausführen und sie mit Systemen integrieren, von denen der Anbieter noch nie gehört hat. Der Kern ist BSD-3-Clause-lizenziert und selbsthostbar, was all das möglich macht.

  • Anpassung

    Die Benutzeroberfläche ist Markup und Konfiguration, die man lesen, ersetzen und erweitern kann – nicht eine Black Box mit einem Theming-API.

  • Selbsthosting

    Der Editor läuft dort, wo deine Anwendung läuft, sodass Projekte und Assets deine Infrastruktur nie verlassen müssen.

  • Erweiterbarkeit

    Eine dokumentierte Plugin-Architektur sowie ein Ökosystem bestehender Plugins zum Anpassen, statt von dort auszugehen.

  • Integrationsfreiheit

    Speicher, Assets und Befehle sind Lücken, die du auf deine eigenen Dienste verweisen lässt.

  • Kontrolle über die Infrastruktur

    Bereitstellung, Upgrades und Datenort sind Ihre Entscheidungen und nach Ihrem Zeitplan.

  • Prüfbarkeit

    Sie können den Code lesen, den Sie an Kunden verschicken, was zunehmend eher eine Beschaffungsanforderung als eine Präferenz ist.

Integration

Integration mit deinem bestehenden Stack

Der Editor ist eine Browser-Bibliothek, also geht er dorthin, wo sich deine Anwendung bereits befindet. Diese Seiten behandeln die Mechaniken pro Framework – Mounten, Aufbereiten und den Editor-Status außerhalb deiner Render-Schleife.

Roadmap

Vom Prototyp zur Produktion

  1. 1
    Phase 1

    Herausgeber

    Bring die Engine zum Laufen mit einem Startblock-Set, ein paar Vorlagen und deiner Marke angewandt. Das Ziel ist eine Demo, an die dein eigenes Team glaubt, kein versandbares Produkt.

  2. 2
    Phase 2

    Produkt

    Verdrahte es in die Anwendung: Authentifizierung, Benutzer, Organisationen, Projektspeicherung und eine Asset-Bibliothek. Hier hört der Builder auf, eine Demo zu sein.

  3. 3
    Phase 3

    Verwaltung

    Rollen, Berechtigungen, ein Genehmigungsschritt und ein Aktivitätspfad. Meistens wird das vom ersten Kunden mit mehr als drei Personen gesteuert.

  4. 4
    Phase 4

    Maßstab

    Multitenancy, individuelle Domains, Publishing-Infrastruktur, Abrechnung, Analysen und die White-Label-Workflows, die es jedem Kunden ermöglichen, wie er selbst zu erscheinen.

Leistung

Leistungsüberlegungen

Ein Bauer hat zwei Laufzeiten mit fast nichts gemeinsam, und sie als eine zu behandeln, ist der häufigste Leistungsfehler bei dieser Art von Produkt.

  • Lazy-Load den Editor

    Lade das Bearbeitungsbundle, wenn ein Benutzer den Editor öffnet, nicht wenn er dein Dashboard öffnet.

  • Halte den Editor-Status aus deinem Anwendungszustand heraus

    Der Editor verwaltet seinen eigenen Baum. Wenn du ihn in deinen globalen Store spiegelst, renderst du deine Anwendung bei jedem Tastendruck neu.

  • Paginate große Asset-Bibliotheken

    Ein Mandant mit Tausenden von Bildern benötigt einen paged, durchsuchbaren Auswähler statt einer langen Liste.

  • Lazy-load-lastlastige Plugins

    Rich-Text-Engines, Code-Editoren und Bildwerkzeuge lohnen sich, bis das benötigte Panel geöffnet ist.

  • Trennen Sie die Laufzeiten

    Nichts, was der Editor benötigt, gehört in das Bundle, das ein Besucher für eine veröffentlichte Seite herunterlädt.

  • Unabhängige Optimierung des veröffentlichten Outputs

    Bilder, kritisches CSS und Caching für veröffentlichte Seiten werden von deiner Rendering-Ebene bestimmt, auf der du die volle Kontrolle hast.

Die Autorenumgebung und die veröffentlichte Website müssen nicht dieselben Laufzeitanforderungen haben.

Sicherheit

Sicherheitsaspekte

Ein Multi-Tenant-Builder akzeptiert nicht vertrauenswürdige Inhalte und erstellt Seiten, die andere Leute laden. Beide Hälften verdienen Aufmerksamkeit, und der Großteil der Arbeit liegt auf deiner Seite der Grenze.

  • Authentifiziere jeden API-Anruf

    Projektlade, Speichern, Asset-Upload und Veröffentlichen sind alles Endpunkte, die eine authentifizierte Sitzung erreicht – und alle es lohnt sich, auch so behandelt zu werden.

  • Validate Permissions serverseitig

    Überprüfe nochmal auf dem Server, was die Oberfläche bereits versteckt hat. Ein versteckter Button ist eine UX-Möglichkeit, keine Zugriffskontrolle.

  • Isoliere Tenant-Daten

    Bereiche jede Abfrage nach Organisation und bevorzuge einen Bereich, der unmöglich ausgelassen werden kann, gegenüber einem, an den sich jeder Entwickler erinnern muss.

  • Uploads validieren

    Überprüfe Typ, Größe und Erweiterung serverseitig und bereitstelle Benutzermedien von einem separaten Ursprung aus, wo möglich.

  • Nutzerinhalte bereinigen

    Ein visueller Builder kann beliebige Markups erstellen. Entscheide bewusst, ob benutzerdefinierte Skripte erlaubt sind, und bereinige entsprechend.

  • Schützen Sie Veröffentlichungs-Endpunkte

    Das Veröffentlichen verändert, was die Öffentlichkeit sieht. Begrenze den Tarif, autorisiere ihn explizit und notiere den Auslöser.

  • Projektdaten validieren

    Ein gespeichertes Projekt ist Benutzereingabe. Validiere seine Form, bevor du es speicherst oder neu renderst.

  • Vertrauen Sie niemals auf clientseitige Berechtigungen

    Die Blockliste und das Panelset sind Konfigurationen, über die der Browser lügen kann.

Dies ist eine Startcheckliste speziell für einen Builder, kein vollständiges Sicherheitsprogramm, und keine Architektur ist durch Konstruktion sicher. Behandeln Sie einen White-Label-Builder wie jede andere Multi-Tenant-Anwendung, die Benutzerinhalte akzeptiert.

Implementierung

Brauchen Sie Hilfe beim Aufbau Ihres White-Label-Builders?

Brauchen Sie Hilfe bei der Integration, Branding oder Erweiterung von GrapesJS in Ihrem Produkt? Entdecken Sie Implementierungsdienste für individuelle Integrationen, UI-Anpassungen, Plugins und Produktionssupport – einschließlich der zwei Sprossen des Stacks, die der Katalog nicht für Sie abdecken kann.

  • Editor-Integration
  • UI-Anpassung
  • Benutzerdefinierte Blöcke & Vorlagen
  • Speicher- und Asset-Adapter
  • Rollen und Genehmigungs-Workflows
  • Produktionsunterstützung
FAQ

Fragen zum White-Label-Seiten-Builder

Was ist ein White-Label-Seiten-Builder?

Ein visuelles Seitenbearbeitungssystem, das in ein anderes Produkt integriert und an dessen Marke, Benutzererfahrung und Geschäftsregeln angepasst wird. Ihre Kunden nutzen es als Funktion Ihrer Anwendung und nicht als Werkzeug von Drittanbietern.

Kann ich GrapesJS whitelabeln?

Ja. Es handelt sich um eine Open-Source-Bibliothek, die selbst gehostet wird, sodass die Benutzeroberfläche, das Blockset, die Vorlagen und das Vokabular alle bei dir zu ändern sind. Die drumherum umliegenden Teile – Konten, Berechtigungen, Mandant, Veröffentlichung – sind in deiner Anwendung implementiert.

Kann ich den GrapesJS UI individuell anpassen?

Ja. Panels, Buttons und Befehle sind konfigurierbar, und die Benutzeroberfläche des Editors kann von deinen eigenen Komponenten gerendert werden, wenn du möchtest, dass sie dein Design-System übernimmt und nicht annähernd nachahmt.

Kann ich das Standard-Branding ersetzen?

Ja. Es gibt kein Herstellerbranding, das du anzeigen musst. Die Benutzeroberfläche steht dir zur Verfügung, und die eigenen Strings des Editors sind übersetzbar, sodass die Labels der Terminologie deines Produkts folgen können.

Kann ich mein eigenes Logo und meine eigenen Farben hinzufügen?

Ja. Die Editor-Shell ist Markup und Stile in deiner Anwendung, also werden ein Logo, eine Farbpalette und deine Schriftarten so aufgetragen, wie sie überall sonst in deinem Produkt verwendet werden.

Kann ich eigene Blöcke erstellen?

Ja, und das müssen Sie: Der Kern liefert absichtlich eine leere Blockpalette aus. Blöcke werden in Ihrem eigenen Code definiert oder durch Plugins hinzugefügt, was es ermöglicht, dass die Palette mit den Dingen übereinstimmt, die Ihre Kunden tatsächlich bauen.

Kann ich eigene Vorlagen erstellen?

Ja. Eine Vorlage ist ein gespeichertes Projekt, das Ihre Anwendung als Ausgangspunkt anbietet. Vorlagen können global, planspezifisch oder privat für einen einzelnen Kunden sein.

Kann ich Sperren nach Benutzerrolle einschränken?

Ja, indem man den Editor mit dem Blocksatz initialisiert, auf den diese Rolle Anspruch hat. Das Recht selbst wird von Ihrem Backend gelöst – die Einschränkung der Palette im Browser ist Präsentation, nicht Durchsetzung.

Kann ich einen Multi-Tenant-Seiten-Builder erstellen?

Ja, mit dem Tenancy, der in deiner Anwendung implementiert ist. GrapesJS bearbeitet jeweils ein Projekt und hat kein Konzept von Organisationen, daher ist es Aufgabe deines Backends, Projekte, Assets und Vorlagen pro Mandant zu begrenzen.

Kann jeder Kunde eigene Seiten und Assets haben?

Ja. Speichern Sie Projekte und Assets gegen die Organisation, die sie besitzt, und scopen Sie jede Abfrage danach. Der Editor wird dann pro Sitzung nur mit den Daten dieses Tenants instanziiert.

Können Kunden auf benutzerdefinierten Domains veröffentlichen?

Ja, als Plattformfunktion. Ihre Anwendung speichert die Domain im Arbeitsbereich, überprüft das Eigentum und leitet Anfragen an die Seiten des jeweiligen Mandants um. Der Editor erstellt die Seite; DNS, Zertifikate und Hosting bleiben bei Ihrer Infrastruktur.

Kann ich meine eigene Datenbank verbinden?

Ja. Der Editor serialisiert ein Projekt und ruft deine Endpunkte auf, um es zu laden und zu speichern, sodass jede Datenbank hinter deinem API funktioniert. Nichts erfordert einen gehosteten Service.

Kann ich meinen eigenen Stauraum nutzen?

Ja. Projektpersistenz und die Asset-Bibliothek sind beide konfigurierbare Nähte, und es gibt bereits vorhandene Plugins, die sie auf verschiedene Backends richten, falls du lieber eines anpassen möchtest, als eigene zu schreiben.

Kann ich Genehmigungs-Workflows erstellen?

Ja, in deiner Anwendung. Modelliere den Zustand der Seite – Entwurf, in Prüfung, Genehmigung, Veröffentlichung – und verlange die Genehmigung kurz bevor die Veröffentlichungsaktion ausgeführt wird. Der Redakteur ist nicht in die Zustandsmaschine eingebunden.

Kann ich die Nutzeraktivität verfolgen?

Ja, indem man einen Eintrag aufzeichnet, wann immer Ihre Anwendung einen Speicherstand, eine Genehmigung oder eine Veröffentlichung verarbeitet. GrapesJS hat kein Audit-Log, und Ihr API ist die einzige Schicht, die weiß, welcher authentifizierte Benutzer handelt.

Kann ich einen White-Label-SaaS-Seiten-Builder erstellen?

Ja – diese Kombination ist üblich. White-Labelling deckt das Markenerlebnis ab; die Verpackung als kommerzielles Produkt mit Plänen und Limits ist eine separate Entscheidung, die auf der SaaS-Seitenbauseite abgedeckt ist.

Kann ich GrapesJS mit React verwenden?

Ja. Es gibt einen offiziellen React-Wrapper, und der Editor kann auch manuell in einer Komponente montiert werden. Die Hauptregel ist, den eigenen Zustand des Editors aus deinem React-Renderzyklus herauszuhalten.

Kann ich GrapesJS mit Next.js verwenden?

Ja. Der Editor ist nur browserfähig, daher wird er clientseitig geladen, während veröffentlichte Seiten vom Server wie gewohnt gerendert werden. Die beiden Laufzeiten getrennt zu halten, ist ebenfalls die bessere Performance-Entscheidung.
Leg los.

Baue den Seiten-Builder, den deine Kunden für ihren eigenen halten

Beginne mit der GrapesJS-Visual-Editing-Engine. Füge dein Branding, dein Content-System, Berechtigungen und deine Infrastruktur hinzu, um einen Seiten-Builder zu schaffen, der sich nativ für dein Produkt anfühlt.

Start

Baue deinen White-Label-Seiten-Builder

Sagen Sie uns, was Sie bauen und welche Schichten des Stacks Sie besitzen möchten. Wir kommen mit einem Umfang zurück.

Leg los
Entdecken Sie

Durchstöbern Sie den Plugin-Katalog

Themes, benutzerdefinierte UI, Blöcke, Vorlagen, Speicheradapter und Veröffentlichungsbefehle – gruppiert nach der Sprosse des Stacks, die sie füllen.

Durchsuchen von Plugins
Sprechen Sie

Sprich mit einem Experten

Integration, Branding, benutzerdefinierte Blöcke, Rollen und Genehmigungsworkflows, die gemeinsam mit Ihrem Team implementiert werden.

Entdecken Sie Dienstleistungen

Deine Marke. Dein Editor. Deine Kunden. Deine Infrastruktur.