Starte einen ausgefeilten HTML-Editor, den den Nutzern tatsächlich Spaß macht
GrapesJS gibt dir die volle Kontrolle auf Produktebene, während GJS.Market die Auslieferung mit bewährten Plugins, Starterblöcken und Presets beschleunigt. Baue einmal, markiere es als dein eigenes und halte die Produktion sauber für die Produktion.
Warum Teams diesen Stack wählen
Schnellstart-Workflow
Installations- und Boot-Editor
Beginne mit dem offiziellen Paket oder CDN-Build und mounte dann den Editor in deiner App-Shell.
npm install grapesjsLadestarterblöcke
Füge ein Plugin-Paket für Heldenabschnitte, Formulare, Preise und CTAs hinzu, damit Nutzer schnell bauen können.
editor.BlockManager.add('hero', { ... })Connect-Persistenz
Verlinke StorageManager an deine API, damit Projekte automatisch speichern und pro Benutzer/Arbeitsbereich laden.
storageManager: { type: 'remote' }Schiff mit Leitplanken
Expose erlaubte nur Komponenten/Stile für dein Produkt, um die Ausgabe sauber und brandkonform zu halten.
editor.on('load', () => { ... })Entscheidungshilfe: Framework vs. Hosted Builder
Architekturübersicht – Wie GrapesJS HTML & CSS modelliert
GrapesJS ist um fünf Kernmanager strukturiert, von denen jeder für ein bestimmtes Anliegen verantwortlich ist:
Jedes HTML-Element auf der Leinwand ist eine GrapesJS-Komponente – ein Modell mit Eigenschaften, Eigenschaften und Ereignislistenern. Du definierst benutzerdefinierte Komponententypen, um zu steuern, wie bestimmte Elemente gerendert und bearbeitet werden.
Blöcke sind die Drag-and-Drop-Einheiten, die Nutzer auf die Leinwand ziehen. Jeder Block definiert einen HTML-Ausschnitt oder Komponentenbaum. Der BlockManager kategorisiert, rendert und verwaltet Blöcke im linken Panel.
Der StyleManager stellt CSS-Eigenschaften als interaktive UI-Steuerungen zur Verfügung. Sektoren gruppieren verwandte Eigenschaften (Typografie, Abmessungen, Hintergründe) und binden visuell an die aktuell ausgewählte Komponente.
Verwaltet die Persistenz des Editor-Zustands. Standardmäßig verwendet localStorage, aber ist austauschbar für jede REST-API, Datenbank oder Cloud-Speicher-Backend über Plugins.
Verwaltet Bilder, Videos und andere Medienressourcen. Unterstützt benutzerdefinierte Upload-Endpunkte und Asset-Bibliotheksintegrationen.
Kern-API-Highlights
Components API
Modelliere jedes HTML-Element als GrapesJS-Komponente. Definiere Typen, Traits und benutzerdefinierte Rendering-Logik. Komponenten sind die grundlegende Einheit der Leinwand.
Blockmanager
Registrieren Sie Drag-and-Drop-Blöcke, die Benutzer auf die Leinwand ziehen können. Blöcke können jede HTML-Struktur, jeden Komponentenbaum oder Inline-Stile enthalten.
Style Manager
Stellen Sie CSS-Eigenschaften den Endnutzern über ein visuelles Panel zur Verfügung. Gruppiere Eigenschaften in Sektoren und binde sie direkt an ausgewählte Komponenten.
Codebeispiel – benutzerdefinierte Blockdefinition
Das Hinzufügen eines benutzerdefinierten Drag-and-Drop-Blocks zu GrapesJS benötigt nur wenige Zeilen:
editor.BlockManager.add('my-block', {
label: 'My Block',
category: 'Basic',
content: {
type: 'text',
content: 'Hello World',
style: { padding: '10px', 'font-size': '16px' }
},
attributes: { class: 'fa fa-text-height' }
});Plugin-Kategorien auf GJS.Market
Blöcke
Vorgefertigte Drag-and-Drop-Blöcke: Heldenabschnitte, Preistabellen, Feature-Raster, Testimonials und mehr.
RTE (Rich Text)
Ersetzen Sie den integrierten Rich-Text-Editor durch Quill-, Tiptap- oder CKEditor-Integrationen.
Lagerung
Speichere Editor-Inhalte in REST-APIs, localStorage, Supabase, Firebase oder jedem benutzerdefinierten Backend.
Export
Exportiere sauberes HTML/CSS in Dateien, das Zwischenbrett, ein ZIP-Archiv oder als MJML-Vorlage.
UI
Erweitern und neu gestalten Sie Panels, fügen Sie Symbolleisten, Modals, Tooltips und benutzerdefinierte Befehle zur Benutzeroberfläche des Editors hinzu.
Anwendungsfälle
White-Label-Builder
Integrieren Sie einen vollständig gebrandeten Seiteneditor in Ihr SaaS-Produkt. Entferne alle GrapesJS-Marken und füge dein eigenes Thema hinzu.
Headless-CMS-Editoren
Kombinieren Sie GrapesJS mit Strapi, Contentful oder Directus als visuelle Bearbeitungsebene für strukturierte Inhalte.
E-Mail-Redakteure
Verwenden Sie das GrapesJS MJML-Preset, um einen responsiven E-Mail-Designer zu erstellen, der produktionsbereites MJML ausgibt.
Seitenredakteure
Baue eine vollständige Drag-and-Drop-Landingpage oder einen Website-Editor mit Vorlagen, Abschnitten und Komponentenbibliotheken.
Ausgewählte Plugins
Blocks Library Pro
Über 50 vorgefertigte Abschnitte und Inhaltsblöcke
Style Manager Pro
Fortgeschrittene CSS-Steuerungen mit visuellen Eigenschaftseditoren
Storage REST API
Verbinde GrapesJS mit jedem REST-Backend für Persistenz
RTE Tiptap
Tiptap-betriebene Rich-Text-Editor-Integration
ZIP exportieren
Vollständiges Projekt als herunterladbares ZIP-Archiv exportieren
Benutzeroberfläche benutzerdefinierter Panels
Konfigurierbares Panel-Layout und Werkzeugleistensystem
Installation
NPM
npm install grapesjsCDN
<!-- HTML -->
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" />
<script src="https://unpkg.com/grapesjs"></script>
<div id="gjs"></div>
<script>
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100vh',
storageManager: false,
});
</script>Durchsuchen Sie GrapesJS-Plugins nach Kategorie
Verwandte Leitfäden
Bereit, deinen HTML-Drag-and-Drop-Editor zu bauen?
Durchstöbern Sie alle Plugins und Starter auf GJS.Market und versenden Sie in Tagen, nicht in Monaten.
Entdecken Sie Plugins