HTML-Drag-and-Drop-Builder

Baue einen HTML-Drag-and-Drop-Builder mit GrapesJS

Erstellen Sie HTML-Seiten visuell mit Drag-and-Drop-Komponenten, Bearbeitungsstile ohne manuelles CSS zu schreiben und behalten Sie die Kontrolle über das HTML und CSS, das Ihre Anwendung erstellt.

Jetzt loslegen Probier den HTML-Editor aus

Open SourceSelbstgehostetHTML + CSS-AusgabeErweiterbarEinbettbar

Ziehen. Ablegen. HTML bearbeiten. Die Ausgabe gehört dir.

Blöcke
Leinwand
Stile
HTML + CSS
Deine App

26k+

GitHub-Sterne

1.4M+

Monatliche npm-Downloads

100+

Plugins auf GJS.Market

BSD-3-Clause

Kernlizenz

Visuell · HTML · CSS

Ein Abschnitt, drei Ansichten

Das ist das ganze Argument der Seite in einer Komponente. Der Visual-Tab ist das, was dein Nutzer zieht und bearbeitet. Die anderen beiden gibt der Editor deinem Code zurück – nichts Verstecktes, nichts Proprietäres, nur Markup- und Stylesheet-Text, den du speichern, transformieren und veröffentlichen kannst, wie du möchtest.

<div id="editor">

Was der Nutzer sieht: Blöcke links, die Seite in der Mitte, Stilsteuerungen rechts.

Blöcke

Hero
Text
Bild
Knopf
Säulen
Formular

your-app.com/editor

section.hero

Build faster

Launch your next project.

Get started

Stile

Polsterung: 96px 24px
Hintergrund: #0f172a
Schriftgröße: 48px
Radius: 8px

<body>
  <section class="hero">
    <h1 class="hero__title">Build faster</h1>
    <p class="hero__text">Launch your next project.</p>
    <a href="/start" class="hero__cta">Get started</a>
  </section>
</body>

* { box-sizing: border-box; } body {margin: 0;}
.hero{
  padding-top:96px;
  padding-right:24px;
  padding-bottom:96px;
  padding-left:24px;
  text-align:center;
  background-color:rgb(15, 23, 42);
}
.hero__title{
  font-size:48px;
  color:rgb(255, 255, 255);
}
.hero__cta{
  display:inline-block;
  padding-top:14px;
  padding-right:28px;
  padding-bottom:14px;
  padding-left:28px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
  background-color:rgb(99, 102, 241);
  color:rgb(255, 255, 255);
}
@media (max-width: 480px){
  .hero__title{ font-size:32px; }
}

Beide Codefenster zeigen die echten Rückgabewerte von GrapesJS 0.23.6, nur zum Lesen neu eingerückt – jeder Aufruf gibt tatsächlich eine einzige Zeile zurück. Zwei Details, die man kennen sollte, bevor man darauf aufbaut: getHtml() serialisiert den Wrapper, das Ergebnis ist also von <body>…</body> umschlossen, und getCss() schreibt Kurzschreibweisen als einzelne Langform-Eigenschaften aus und normalisiert Farben zu rgb(). Das Stylesheet beginnt außerdem mit einem kleinen Reset, den GrapesJS einfügt; getCss({ avoidProtected: true }) lässt ihn weg.

Die Idee

Erstellen Sie HTML visuell, anstatt jedes Layout von Hand zu schreiben

Ein HTML-Drag-and-Drop-Builder ermöglicht es Nutzern, Seitenstrukturen visuell zusammenzustellen, während Ihre Anwendung die Kontrolle über den zugrundeliegenden Inhalt, das Styling und den Veröffentlichungsworkflow behält.

Drag & Drop

Nutzer verschieben Blöcke und Komponenten auf eine Leinwand, anstatt eine Vorlagendatei zu bearbeiten. Du entscheidest, welche Blöcke existieren, wo sie entfernt werden dürfen und was sie enthalten dürfen.

Visuelle Bearbeitung

Inhalt, Layout und Stile werden über Panels bearbeitet, anstatt jede CSS-Regel von Hand zu schreiben. Der Editor wandelt diese Entscheidungen in gewöhnliche Stylesheet-Regeln um.

HTML + CSS-Ausgabe

Holen Sie das resultierende HTML und CSS als zwei einfache Strings ab und nehmen Sie sie in Ihre eigene Anwendung, Ihren eigenen Speicher und Ihren eigenen Veröffentlichungsworkflow ein.

Definition

Was ist ein HTML-Drag-and-Drop-Builder?

Es ist ein Editor, der es einer Person ermöglicht, eine Webseite zusammenzustellen, indem er Teile auf eine Leinwand zieht, sie über Steuerungen statt über Code anpasst und auf der anderen Seite echtes HTML und CSS herausbekommt. Um das überzeugend zu erreichen, muss er all das Folgende in einer kohärenten Software zusammenfassen:

HTML-Komponenten – jedes Element auf der Leinwand, modelliert als etwas, worüber der Editor nachdenken kann
Eine Leinwand, die die Seite so rendert, wie es der Browser tut, dabei aber bearbeitbar bleibt
Drag & Drop mit gültigen Drop-Zielen statt frei schwebender Boxen
Wiederverwendbare Blöcke, die ein Nutzer wiederholt einziehen kann.
Stilkontrollen, die echte CSS-Regeln schreiben
Responsive Bearbeitung pro Breakpoint
Vermögensverwaltung für Bilder und Medien
Persistenz, sodass eine halbfertige Seite einen geschlossenen Tab überlebt
Export und Veröffentlichung des fertigen HTML und CSS

Der Unterschied zwischen einem visuellen HTML-Editor und einer einfachen Drag-and-Drop-Bibliothek besteht darin, dass der Editor den gesamten Bearbeitungszustand – Auswahl, Komponenten, Stile, Befehle, Speicher und Ausgabe – als ein System verwaltet. Eine Bibliothek bewegt ein Feld über den Bildschirm; ein Editor weiß, was dieses Feld ist, was es enthalten könnte, welche CSS-Regel zu ihm gehört und wie das Ergebnis serialisiert werden soll.

Live-Editor

Probier einen echten HTML-Editor aus

Drei öffentliche GrapesJS-Builds. Nichts lädt, bis du klickst – die Frames bleiben unerwünscht, daher kostet dich dieser Abschnitt bei Ankunft nichts.

In einem neuen Tab öffnen

Die Standard-GrapesJS-Demo. Ziehe einen Block hinein, wähle ihn aus, ändere einen Stil – dann öffne die Code-Ansicht in der Symbolleiste und beobachte, wie sich HTML und CSS mit dir ändern.

grapesjs.com/demo.htmlKostenlos

Lädt eine Demo von Drittanbietern in einem iframe. Es wird nichts angefordert, bis man darauf klickt.

Arbeitsablauf

Vom Drag & Drop zum Produktions-HTML

1
01
Wählen Sie einen Block
Der Nutzer wählt aus der von dir definierten Palette. Ein Block ist ein benannter, wiederverwendbarer Ausgangspunkt – ein Hero, eine Preistabelle, ein Formular – nicht ein beliebiger leerer Div.
2
02
Zieh es auf die Leinwand
Der Editor entscheidet, wo der Block legal landen darf, fügt die Komponente ein und wählt sie aus. Drop-Regeln können Sie pro Komponententyp festlegen.
3
03
Inhalt und Stile bearbeiten
Der Text wird an Ort und Stelle bearbeitet; Layout, Abstand, Typografie und Farbe stammen aus dem Style Manager. Jede Änderung wird zu einer CSS-Regel, die der Editor verfolgt.
4
04
Projekt speichern
Der Storage Manager sendet den Editor-Zustand an den Endpunkt, auf den du ihn zeigst. Das ist der Zustand, der zum Weiterbearbeiten benötigt wird, nicht die fertige Seite.
5
05
HTML exportieren oder veröffentlichen + CSS
Rufe getHtml() und getCss() auf und mach dann, was dein Produkt verlangt: bereinigen, in dein eigenes Layout einbetten, versionieren, cachen, deployen.

Bearbeitungsfläche

Was können Nutzer bearbeiten?

Genau so viel, wie du es zulässt. All diese Dinge kann der Editor offenlegen – und du kannst sie pro Komponententyp festlegen, damit ein Marketer kein von einem Ingenieur entworfenes Layout zerstören kann.

Inhalt

Text, Überschriften, Links und alle Inhalte, die du als bearbeitbar markierst. Komponenten, die du lieber intakt lassen möchtest, können einfach nicht bearbeitbar bleiben.

Aufbau

Abschnitte, Spalten, Container und der Abstand dazwischen über die Dimension- und Flex-Steuerungen im Style Manager.

Typografie

Schriftartfamilie, Größe, Gewicht, Zeilenhöhe und Ausrichtung, geschrieben als gewöhnliche CSS-Deklarationen.

Farben

Text, Hintergründe, Ränder und andere visuelle Eigenschaften. Werte werden im ausgegebenen Stylesheet als rgb() serialisiert.

Bilder und Medien

Das wird über den Asset Manager gehandhabt, den du auf deinen eigenen Upload-Endpunkt oder einen Speicheranbieter verweisen kannst.

Responsive Stile

Regeln, die auf ein Gerät zugeschnitten sind. Das Styling, solange ein Breakpoint aktiv ist, erzeugt eine passende Medienanfrage, anstatt die Basisregel zu überschreiben.

Komponenten

Strukturierte, wiederverwendbare Elemente, die von dir definiert werden – die Einheit, in die sich ein Block verwandelt, sobald sie fallen lässt, und das, was deine App später erkennen kann.

Eigenschaften und Merkmale

Traits werden zu den Feldern im Einstellungspanel, sodass eine benutzerdefinierte Komponente eine Überschrift und ein Link-Ziel anzeigen kann und sonst nichts.

Einige davon sind Konfigurationen und keine Standardwerte. GrapesJS liefert den Style Manager direkt mit General, Flex, Dimension, Typografie, Dekorationen und Extra Sektoren aus; Asset-Uploads, Rich-Text-Verhalten und Berechtigungen pro Komponente sind Dinge, die man verkabelt – oder ein Plugin installiert.

Ausgabe

Du kontrollierst das HTML und das CSS

Ein visueller Editor ist nur dann nützlich, wenn das Ergebnis in Ihre Anwendung passt. GrapesJS hält zwei Dinge getrennt, und die Unterscheidung ist wichtiger als jede Funktionsliste: der Zustand, den es braucht, um weiter zu bearbeiten, und das Markup, das Ihre Nutzer tatsächlich erhalten.

Von der Leinwand zur Live-Seite

Visueller Editor
Projektzustand
HTML + CSS
Dein Backend
Deine Veröffentlichung

publish.jsJS

// What the editor needs to keep editing — components, styles,
// pages, assets and symbols. Store this to resume a session.
const projectState = editor.getProjectData();

// What your users actually receive. Two plain strings.
const html = editor.getHtml();  // <body>…</body>
const css = editor.getCss();    // one line of CSS

// From here it is your application's decision: sanitize it, wrap it
// in your own layout, version it, cache it, put it behind your CDN.
await fetch(`/api/pages/${pageId}/publish`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ html, css }),
});

getProjectData() gibt den bearbeitbaren Zustand zurück – Seiten, Stile, Assets, Symbole und Datenquellen. Speichert es, um eine Sitzung fortzusetzen; es ist nicht das, was Sie den Besuchern bereitstellen.
getHtml() und getCss() liefern Strings zurück. Es gibt keine Laufzeit zur Installation auf der veröffentlichten Seite und keinen Rendering-Service in der Schleife.
Bereinigung, Templating, Versionierung, Caching und Deployment bleiben auf deiner Seite. Das ist eine Grenze, keine Lücke – genau sie sorgt dafür, dass die Ausgabe in ein Produkt passt, das du bereits hast.

Ein Hinweis zur Erwartungshaltung: Das ausgegebene Stylesheet ist originalgetreu, nicht von Hand optimiert. Kurzschreibweisen erscheinen als einzelne Langform-Eigenschaften, Farben als rgb(), und ein kleiner Reset wird vorangestellt, sofern du ihn nicht abschaltest. Behandle die Ausgabe als verlässliche Quelle, die du nachbearbeitest – genau wie das Ergebnis jedes anderen Build-Schritts.

Bauen vs. von einem Kern aus starten

Warum einen HTML-Editor von Grund auf bauen?

Jeder visuelle HTML-Editor benötigt dieselben Subsysteme, bevor er etwas Interessantes leisten kann. Die Frage ist nicht, ob Sie sie brauchen werden – sondern ob das Schreiben der Teil Ihres Produkts ist, der die nächsten sechs Monate Ihres Teams wert ist.

Was ein HTML-Editor braucht, bevor er irgendetwas bearbeitet

Editierbare Leinwand
Drag & Drop
Komponentenmodell
Auswahl
Blockpalette
Stilsteuerung
Breakpoints
Asset-Bibliothek
Rückgängig machen / neu machen
Serialisierung
Lagerung
HTML-Ausgabe
CSS-Ausgabe
Plugin-API

Bau es selbst

Du besitzt alle vierzehn

Und du besitzt sie dauerhaft: die Leinwand, die bearbeitbar bleiben muss, während sie wie ein Browser rendert, die Drop-Target-Logik, der Rückgängig-Stack übersteht, der Serializer, der deinen In-Memory-Baum wieder in Markup verwandelt – plus jeden Bug-Report gegen sie, solange das Produkt lebt.

Fang mit GrapesJS an

Du fängst dort an, wo diese bereits funktionieren

Die Leinwand, Drag & Drop, Komponentenmodell, Block Manager, Style Manager, Device Manager, Asset Manager, Rückgängigmache, Storage Manager und die HTML/CSS-Ausgabe-APIs enthalten den Kern. Was du schreibst, ist der Teil, der spezifisch für dein Produkt ist.

Das ist keine Behauptung, dass GrapesJS Ihr gesamtes Produkt ist. Speicherung, Authentifizierung, Berechtigungen, Veröffentlichung, Säuberung und jeder produktspezifische Workflow bleiben Ihre Grenzen – siehe das untenstehende Architekturdiagramm, um genau zu sehen, wo die Grenze liegt.

Sehen Sie, wo die Linie verläuft

Teilsystem für Teilsystem

Was du schreibst und was es bereits gibt

Die rechte Spalte verspricht nicht, dass ein Subsystem für deinen Anwendungsfall fertig ist – sie nennt den Teil von GrapesJS, den du erweiterst, anstatt die leere Datei, von der du sonst starten würdest.

Editor-Subsystem	Selbst bauen	Fang mit GrapesJS an
Leinwand	Baust du selbst	Editor-Fundament
Drag & Drop	Baust du selbst	Editor-Fundament
Komponentenmodell	Baust du selbst	DomComponents
Blöcke	Baust du selbst	Block Manager
Stilsteuerung	Baust du selbst	Style Manager
Responsive Bearbeitung	Baust du selbst	Device Manager
Vermögenswerte	Baust du selbst	Asset Manager
Rückgängig machen / neu machen	Baust du selbst	Befehle und Verlauf
Lagerung	Baust du selbst	Storage Manager
HTML-Ausgabe	Baust du selbst	editor.getHtml()
CSS-Ausgabe	Baust du selbst	editor.getCss()
Individuelle Komponenten	Baust du selbst	DomComponents.addType
Plugin-Architektur	Baust du selbst	Bestehende Plugin-API
Auth und Berechtigungen	Baust du selbst	Ihr Antrag
Bereinigung	Baust du selbst	Ihr Antrag
Veröffentlichung	Baust du selbst	Ihr Antrag

Die letzten drei Zeilen sind die ehrlichen. Nichts am Einbetten eines Editors nimmt dir die Verantwortung ab, wer was bearbeiten darf, was gespeichert wird und was die Öffentlichkeit erreicht.

Architektur

Wie ein HTML-Drag-and-Drop-Builder in Ihre Anwendung integriert wird

Der Editor ist eine Ebene Ihres Produkts – nicht das Produkt selbst. Ihre Anwendung behält die Nutzer, die Berechtigungen, die Daten und die Entscheidung, was live geht.

Ihr Antrag

Du besitzt die Oberfläche

Nutzer
Auth und Berechtigungen
Routing
Abrechnung
Navigation

Eingebettete Schicht

GrapesJS visueller Editor

Erweitern Sie es mit Plugins

Leinwand
Blöcke
Komponenten
Stile
Vermögenswerte
Geräte

Persistenz
Deine API
- Storage Manager
- Autosave
- Versionen
Daten
Deine Datenbank
- Projekte
- Seiten
- Vermögenswerte
Lieferung
Deine Veröffentlichung
- Vorschau
- Genehmigung
- Live-HTML

GrapesJS stellt die visuelle HTML-Bearbeitungsebene bereit. Alles darüber und darunter – wer bearbeitet, was gespeichert wird, was veröffentlicht wird – bleibt in der bereits vorhandenen Anwendung erhalten.

Unter der Haube

Die Bausteine hinter dem Editor

Fünf Manager erledigen den Großteil der Arbeit. Sie treffen sie innerhalb einer Stunde nach Beginn, daher lohnt es sich zu wissen, wofür jeder verantwortlich ist.

Komponenten

HTML-Elemente werden als editierbare Komponenten dargestellt, mit eigenen Regeln darüber, was sie enthalten, ob sie gezogen werden dürfen und welche Eigenschaften sie offenlegen.

Block Manager

Die Palette. Blöcke sind das, was die Nutzer ziehen; jeder nennt die Komponente, zu der er wird. Der Kern liefert eine leere Palette, also ist es ganz deine Entscheidung, was dort erscheint.

Style Manager

Visuelle CSS-Eigenschaftssteuerungen, gruppiert in Sektoren – General, Flex, Dimension, Typografie, Dekorationen und mehr standardmäßig. Sektoren und Eigenschaften sind konfigurierbar.

Storage Manager

Es hält den Projektstatus auf lokalen Speicher, einen entfernten Endpunkt oder einen selbst geschriebenen Speicheradapter fest. Autosave ist ein Konfigurationsflag.

Asset Manager

Bilder und Medien: der Picker, den Nutzer sehen, und der dahinterliegende Upload-Pfad, den du auf deinen eigenen Endpunkt oder ein Provider-Plugin verweisen kannst.

Lies die GrapesJS-Dokumentation

Individuelle Komponenten

Erstellen Sie Ihre eigenen HTML-Komponenten

Hier hört ein HTML-Builder auf, generisch zu sein. Definiere einen Komponententyp, entscheide, was er rendert, und stelle nur die Eigenschaften offen, die Nutzer kontrollieren sollen – der Rest des Markups bleibt genau so, wie deine Ingenieure es geschrieben haben.

hero-block.jsJS

// A block is what the user drags out of the panel.
editor.BlockManager.add('hero', {
  label: 'Hero',
  category: 'Sections',
  content: { type: 'hero' },
});

// A component type is what that block becomes on the canvas — and the
// only place you decide what the user may change about it.
editor.DomComponents.addType('hero', {
  model: {
    defaults: {
      tagName: 'section',
      attributes: { class: 'hero' },
      components: '<h1 class="hero__title">Build faster</h1>',
      // Traits become the fields in the settings panel.
      traits: [{ type: 'text', name: 'headline', label: 'Headline' }],
      droppable: false,
    },
  },
});

Lesen Sie die Components API

Blockiere → Komponente → Ausgabe

Der Block ist nicht die Komponente

In den meisten Tutorials teilen sich vier Dinge einen Namen und sind wirklich unterschiedlich. Sie auseinanderzuhalten ist der Unterschied zwischen einem Builder, den man verwalten kann, und einem Haufen HTML-Strings.

Block
Komponente
Merkmale
Aufschlag
Ihr Antrag

Block

Was der Nutzer zieht

Ein Paletteneintrag: ein Label, eine Kategorie und der Inhalt, den sie einfügt. Rein ein Ausgangspunkt – er hat nach dem Drop kein Leben mehr.

Komponente

Was daraus wird

Der Typ, der bei DomComponents registriert ist. Er entscheidet über das Tag, die Standardkinder, ob das Objekt droppbar ist und wie der Editor es von da an behandelt.

Merkmale

Was Nutzer ändern könnten

Die Felder im Einstellungspanel. Ein Merkmal ist ein absichtliches Loch in einer ansonsten versiegelten Komponente – eine Überschrift, ein Link-Ziel, eine Plan-ID.

Aufschlag

Was herauskommt

Die Komponente wurde mit den von dir definierten Klassen und Attributen zu HTML serialisiert, bereit für alles, was dein Backend als Nächstes macht.

Gestalte diese Kette bewusst, und nicht-technische Nutzer erhalten echte Freiheit innerhalb der von dir gewählten Grenzen. Überspringst du sie, hast du einen Texteditor veröffentlicht, der Divs ausgibt.

Blöcke

Beginnen Sie mit fertigen HTML-Blöcken

Das sind die Abschnittstypen, die fast jeder Bauer am ersten Tag benötigt, beschrieben durch das Markup, das sie ausgeben, und nicht durch ihr Aussehen. Baue sie mit der Block Manager-API zusammen oder installiere ein Block-Plugin und starte mit einer vollständigen Palette.

Hero
Ein Abschnitt mit einer Überschrift, einem unterstützenden Absatz und einem Link, der als Button gestaltet ist.
Header
Ein Header mit einem Logo-Element und eine Navigationsliste, die auf schmalen Breiten zusammenklappt.
Merkmale
Ein Behälter mit wiederholten Karten, jede mit einem Symbol-Slot, einer Überschrift und einer Kopie des Hauptteils.
Preisgestaltung
Plankarten mit einem Preiselement, einer Funktionsliste und einem Call-to-Action-Link.
Erfahrungsberichte
Blockquote-Elemente mit einem Zitat und einem optionalen Avatarbild.
Galerie
Ein Bildgitter, dessen Quellen aus dem Asset Manager stammen.
CTA
Ein einzelner zentrierter Abschnitt mit einer Überschrift und einer Hauptverbindung.
Formen
Ein Formelement mit beschrifteten Eingaben und einer Aktion, auf die du hinweise zeigen kannst.
Fuß
Linkspalten, Rechtstext und sekundäre Navigation in einem Footer-Element.

Durchsuche Block-Plugins

Es lohnt sich, präzise zu sein: Dies sind Beispiele für Blocktypen, keine Liste von Dingen, die in GrapesJS eingebaut sind. Der Kern beginnt absichtlich mit einem leeren Block Manager – welche Palette deine Nutzer bekommen, ist eine Entscheidung, die du triffst, entweder indem du die Blöcke schreibst oder eines der Block-Plugins weiter unten auf dieser Seite installierst.

Anwendungsfälle

Was kannst du bauen?

Derselbe Bearbeitungskern zeigte auf sechs verschiedene Probleme. Jedes dieser Probleme benötigt HTML-Kontrolle aus unterschiedlichen Gründen.

HTML-Seiteneditor

Geben Sie den Nutzern eine visuelle Möglichkeit, Seiten zu bearbeiten, die bereits als HTML existieren. Da der Editor das Markup umkehrt, erweitern Sie Ihre aktuellen Seiten, anstatt sie in ein proprietäres Format zu migrieren.

WYSIWYG-Seitengenerator

Landingpage-Builder

Lass Marketer Kampagnenseiten aus von deinem Team entworfenen Blöcken zusammenstellen, wobei die Klassen und die Struktur, die dein Designsystem erwartet, im Ergebnis erhalten bleiben.

Landingpage-Builder

SaaS-Seitenbauer

Integrieren Sie visuelle Bearbeitung als Funktion Ihres Produkts. Kunden erstellen Seiten innerhalb Ihrer App, auf Ihrer Domain, gespeichert in Ihrer Datenbank.

SaaS-Seitenbauer

CMS-Visual-Editor

Fügen Sie einer Content-Plattform eine visuelle Ebene hinzu, ohne sie zu ersetzen. Der Editor erstellt HTML, das das CMS bereits speichert und rendern kann.

Headless-CMS-Editor

E-Mail-Builder

E-Mail-HTML ist ein eigenständiges Fachgebiet – Tabellen, Inline-Stile, Besonderheiten des Kunden. GrapesJS behandelt es über die MJML- und Newsletter-Voreinstellungen und nicht über den Webseitenpfad.

React E-Mail-Builder

Einbettbarer Editor

Senden Sie den Editor in einem bestehenden Dashboard, hinter Ihrer eigenen Authentifizierung und Navigation, ohne Weiterleitung zu einer Drittanbieterseite.

Einbettbarer Seitenbauer

Zielgruppe

Wer verwendet einen HTML-Visual-Editor?

Verschiedene Teams kommen aus unterschiedlichen Gründen hierher, aber die Anforderung ist dieselbe: visuelles Bearbeiten, ohne dafür die Kontrolle über das Markup aufzugeben.

Entwickler

Fügen Sie einer bereits existierenden Anwendung visuelles Bearbeiten hinzu, ohne eine Plattform zu übernehmen oder das Frontend um die Laufzeit einer anderen Person umzuschreiben.

SaaS-Teams

Machen Sie die Seitenerstellung zu einer Funktion, für die Kunden bezahlen, wobei der Editor auf Ihrer Domain lebt und die Daten in Ihrer Datenbank bleiben.

CMS-Teams

Geben Sie den Content-Teams visuelle Bearbeitung, ohne das darunterliegende CMS zu ersetzen, denn was herauskommt, ist HTML, das das System bereits verwaltet.

Agenturen

Baue ein Seitenbearbeitungssystem mit eigenen Blöcken und Komponenten und verwende es dann in Kundenprojekten wieder, anstatt es pro Auftrag neu zu bauen.

Marketingplattformen

Lassen Sie Nutzer Landingpages visuell verfassen, während Ihre Plattform die Vorlagen, das Tracking und die Veröffentlichungspipeline konsistent hält.

Einbettung

Integrieren Sie den HTML-Builder in Ihr Produkt

Sie müssen Benutzer nicht auf eine andere Website schicken, um ihre Seiten zu bearbeiten. Mounten Sie den Editor in Ihrer eigenen Anwendung und behalten Sie Ihre bestehende Authentifizierung, Navigation und Backend.

Wo der Redakteur sitzt

Deine App
Auth
HTML-Editor
Deine API
Datenbank

In der Praxis ist das eine Route in deiner App, die einen Container rendert und den Editor dagegen initialisiert. Der Nutzer verlässt deine Domain nie, die Sitzung ist die, die er bereits hat, und das Projekt lädt und speichert über die von dir geschriebenen Endpunkte.

Siehe den Leitfaden zum Einbettbaren Seitenbauer

Lagerung

Speichere HTML-Builder-Projekte im eigenen Backend

Richte Storage Manager auf deine API und jede Seite wird zu einer Zeile in deiner Datenbank, hinter deiner eigenen Authentifizierung. GrapesJS hostet nichts, und GJS.Market auch nicht – keine Benutzerinhalte erreichen uns jemals.

Zwei Dinge zu lagern, nicht eines

Zustand des Herausgebers
Ihre Speicher-API
Deine Datenbank
HTML + CSS
Live-Seite

editor-storage.jsJS

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

  // Editor state goes to your API, behind your own authentication.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

Halte die Unterscheidung deutlich. Der Editor-Status ist das, was der Editor braucht, um eine Seite für weitere Bearbeitungen wieder zu öffnen. Veröffentlichte Ausgabe ist das HTML und CSS, das ein Besucher erhält. Sie haben unterschiedliche Lebenszyklen, unterschiedliche Zugriffsregeln und meist unterschiedliche Tabellen – und ein Plugin kann bei der Verkabelung helfen, aber die Architektur liegt bei dir.

Veröffentlichung

Du entscheidest, wie HTML veröffentlicht wird

1
01
Bearbeitung
Der Benutzer arbeitet auf der Leinwand. Noch ist nichts öffentlich; der Editor berührt nur den Projektstatus.
2
02
Sparen Sie sich einen Zug
Autosave oder ein expliziter Speicherstand schreibt den Zustand über deinen Speicher-Endpunkt unter deinen Berechtigungsregeln.
3
03
Vorschau
Rendere das aktuelle HTML und CSS auf einer Vorschauroute, sodass der Autor die echte Seite und nicht die Leinwand sieht.
4
04
Genehmigen
Wenn Ihr Produkt überprüft werden muss, ist dies Ihr Arbeitsablauf – der Redakteur hat keine Meinung darüber, wer abschließen darf.
5
05
Veröffentlichen
Nimm getHtml() und getCss(), bereinige das Ergebnis, bette es in dein Layout ein, versioniere es und schreibe es dorthin, wo du deine Seiten auslieferst.
6
06
Live-HTML
Die veröffentlichte Seite ist auf deiner Infrastruktur einfach HTML und CSS. Es ist keine Editor-Laufzeit erforderlich, damit ein Besucher sie sehen kann.

Das ist der deutlichste Unterschied zu einem gehosteten Page Builder. Kein Anbieter entscheidet, wann deine Seite live geht, auf welcher Domain sie bereitgestellt wird oder was passiert, wenn du nicht mehr zahlst.

Responsive

Visuell responsives HTML aufbauen

Der Device Manager wechselt die Leinwand zwischen den Breiten, und Stile, die während eines aktiven Geräts gesetzt werden, werden als Medienabfrage geschrieben, die auf diese Breite abgegrenzt ist, anstatt die Grundregel zu überschreiben. GrapesJS wird mit Desktop, Tablet, mobilem Querformat und Mobilem Porträt ausgeliefert; die Liste und ihre Breiten sind Konfiguration, kein festes Set.

DesktopDefault

Tablet770px

Mobiles Porträt320px

Was Nutzer pro Breakpoint ändern können

Abstand
Typografie
Aufbau
Sichtbarkeit
Ausrichtung
Hintergründe

Die angezeigten Breiten sind die GrapesJS-Standardwerte. Es lohnt sich, es klar zu sagen: Der Editor definiert die CSS-Regeln – wie eine veröffentlichte Seite letztlich gerendert wird, hängt weiterhin vom Markup und Stylesheet ab, das du aussendest, sowie vom Browser, der sie liest.

Ökosystem

Erweitern Sie Ihren HTML Builder mit Plugins

Alles unten ist ein echtes Verzeichnis auf GJS.Market, mit Name, Preis und Thumbnail live aus dem Katalog gerendert. Gruppiert so wie diese Seite das Problem betrachtet: zuerst Code und Ausgabe, dann die Panels drumherum.

Code- und HTML-Bearbeitung

Lassen Sie Nutzer – oder Ihre eigenen Entwickler – das Markup und die Stile hinter einer Komponente lesen und bearbeiten, ohne den Editor zu verlassen.

Durchstöbern Sie diese Kategorie

Codeansicht

Grapesjs Component Code Editor

Öffnet das HTML und CSS der ausgewählten Komponente für direkte Bearbeitung – der schnellste Weg, die visuelle/Code-Beziehung für einen skeptischen Entwickler offensichtlich zu machen.

Berücksichtigung	GrapesJS	Drag-and-Drop-Bibliothek	Gehosteter Seitengenerator	Von Grund auf neu bauen
Visueller Editor enthalten	Ja	Teilweise – nur die Geste	Ja	Was auch immer du baust
Kontrolle über HTML und CSS	High – die Ausgabe steht dir zur Nachbearbeitung zur Verfügung	Hoch – du schreibst die Markup	Das variiert je nach Anbieter	Gesamt
Selbstgehostet	Ja	Ja	Normalerweise nicht	Ja
Einbettbar in deiner App	Ja	Ja	Kommt auf den Anbieter an	Ja
Komponentenmodell und Eigenschaften	Eingebaut	Du schreibst es	Modell des Anbieters	Du schreibst es
Stilsteuerung und Breakpoints	Eingebaut	Du schreibst sie	Eingebaut	Du schreibst sie
Zeit für einen arbeitenden Redakteur	Tage	Monate	Protokolle	Monate bis zu Jahren
Produktanpassung	Hoch	Hoch	Begrenzt durch den Verkäufer	Unbegrenzt
Laufende Wartung	Deine Integration plus ein Upstream-Kern	Der gesamte Editor	Verkäufer	Alles, für immer
Lizenz und Kosten	BSD-3-Clause-Kern, $0 zur Nutzung	In der Regel zustimmend	Abonnement	Ingenieurzeit

Baue einen HTML-Drag-and-Drop-Builder mit GrapesJS

Ein Abschnitt, drei Ansichten

Erstellen Sie HTML visuell, anstatt jedes Layout von Hand zu schreiben

Drag & Drop

Visuelle Bearbeitung

HTML + CSS-Ausgabe

Was ist ein HTML-Drag-and-Drop-Builder?

Probier einen echten HTML-Editor aus

Vom Drag & Drop zum Produktions-HTML

Was können Nutzer bearbeiten?

Inhalt

Aufbau

Typografie

Farben

Bilder und Medien

Responsive Stile

Komponenten

Eigenschaften und Merkmale

Du kontrollierst das HTML und das CSS

Warum einen HTML-Editor von Grund auf bauen?

Du besitzt alle vierzehn

Du fängst dort an, wo diese bereits funktionieren

Was du schreibst und was es bereits gibt

Wie ein HTML-Drag-and-Drop-Builder in Ihre Anwendung integriert wird

Die Bausteine hinter dem Editor

Komponenten

Block Manager

Style Manager

Storage Manager

Asset Manager

Erstellen Sie Ihre eigenen HTML-Komponenten

Der Block ist nicht die Komponente

Was der Nutzer zieht

Was daraus wird

Was Nutzer ändern könnten

Was herauskommt

Beginnen Sie mit fertigen HTML-Blöcken

Hero

Header

Merkmale

Preisgestaltung

Erfahrungsberichte

Galerie

CTA

Formen

Fuß

Was kannst du bauen?

HTML-Seiteneditor

Landingpage-Builder

SaaS-Seitenbauer

CMS-Visual-Editor

E-Mail-Builder

Einbettbarer Editor

Wer verwendet einen HTML-Visual-Editor?

Entwickler

SaaS-Teams

CMS-Teams

Agenturen

Marketingplattformen

Integrieren Sie den HTML-Builder in Ihr Produkt

Speichere HTML-Builder-Projekte im eigenen Backend

Du entscheidest, wie HTML veröffentlicht wird

Visuell responsives HTML aufbauen

Erweitern Sie Ihren HTML Builder mit Plugins

Code- und HTML-Bearbeitung

Grapesjs Component Code Editor

Code Editor

Export und Veröffentlichung

Export Zip

GrapesJS NodeJS JSON Converter to HTML/CSS

Grapesjs Netlify

HTML-Blöcke

Plugin Basic Blocks

Plugin Blocky for Tailwind CSS

Stilsteuerung

Ui Suggest Classes

Grapesjs Style Gpickr

Individuelle Komponenten

Symbols

Rich Text