Baue einen produktionsbereiten Seitenbauer mit Open-Source-Kontrolle.
Nutze GrapesJS als deine visuelle Bearbeitungs-Engine und setze dann deinen idealen Workflow mit Plugins von GJS.Market zusammen. Du behältst die volle Kontrolle über UX, Infrastruktur und Daten und lieferst gleichzeitig einen ausgefeilten Editor für nicht-technische Nutzer.
Was deine Nutzer bekommen
- Visuelle Bearbeitung mit wiederverwendbaren Blöcken
- Konsistente Marken-Design-Kontrollen
- Schnellere Veröffentlichungszyklen für Content-Teams
- Zuverlässiger Export in HTML und CSS
Warum Teams Open Source für visuelle Editoren wählen
Sende schnell einen brauchbaren Editor aus
Starte mit Open-Source-Kern plus bewährten Plugins, anstatt Drag & Drop von Grund auf neu zu bauen.
Behalten Sie die volle Produktkontrolle
Selbst hosten und passen Sie jedes Panel, jeden Befehl und jedes Speicherverhalten an Ihren Arbeitsablauf an.
Skalieren Sie ohne sitzbasierte Kosten
Nutze MIT-lizenzierte GrapesJS in kommerziellen Produkten und bezahle nur für optionale Premium-Plugins.
Besitze deine Datenpipeline
Speichere Vorlagen, Seiten und Überarbeitungen in deiner bestehenden API und Infrastruktur.
Umsetzungsplan, dem Ihr Team folgen kann
Definiere deine Aufgabe als Redakteur
Landingpages, E-Mails, Vorlagen oder vollständige CMS-Inhalte. Wähle zuerst eine Wahl, um Überbau zu vermeiden.
Installieren Sie den GrapesJS-Kern
Initialisiere zuerst mit deaktiviertem Speicher und verbinde dann deine API, sobald die UX stabil ist.
Füge nur essentielle Plugins hinzu
Beginnen Sie mit Blöcken, Formularen und Export. Erweitern Sie, nachdem Ihre ersten Nutzer den Workflow überprüft haben.
Speicher- und Veröffentlichungsablauf der Karte
Behalten Sie JSON und generiertes HTML/CSS bei, damit nicht-technische Nutzer sofort veröffentlichen können.
Nutzung der Strecke und Fehler
Misse die Einführung von Plugins, fehlgeschlagene Befehle und Veröffentlichungslatenz, um deine Roadmap zu steuern.
Wähle deinen besten Startweg
Für Produktteams
Liefern Sie einen Marken-Seiteneditor in Ihrer SaaS-App ohne Anbieterbindung ein.
Implementierungsmuster von React anzeigenFür Marketingteams
Lassen Sie nicht-technische Nutzer Seiten schneller mit wiederverwendbaren Blöcken und Vorlagen starten.
Entdecken Sie Drag-and-Drop-WorkflowsFür Entwickler
Starte mit dem GrapesJS-Kern und erweitere die Fähigkeiten mit fokussierten Plugins.
Durchsuchen Sie das Plugin-ÖkosystemEntwickler-Schnellstart in 4 Schritten
Installiere das Kernpaket
Richte die Basis-Editor-Abhängigkeit für deine App ein.
npm install grapesjsInitialisieren Sie die Editor-Canvas
Rendern Sie eine funktionierende visuelle Leinwand, bevor Sie Anpassungen vornehmen.
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100vh',
storageManager: false,
});Aktiviere Plugins von GJS.Market
Füge Funktionen hinzu, ohne deine Kernimplementierung aufzublähen.
import myPlugin from 'grapesjs-my-plugin';
const editor = grapesjs.init({
container: '#gjs',
plugins: [myPlugin],
pluginsOpts: { [myPlugin]: { option: true } },
});Verknüpfe Speichern und Veröffentlichen Aktionen
Machen Sie den Editor zu einem Produktions-Publishing-Workflow.
editor.Commands.add('publish-page', {
run: async (editorInstance) => {
const html = editorInstance.getHtml();
const css = editorInstance.getCss();
await fetch('/api/pages/publish', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ html, css }),
});
},
});Empfohlene kostenlose Plugins nach Ergebnis
GrapesJS Preset Webpage
Starten Sie komplette Seiten mit Startblöcken, Panels und Stilen.
Am besten für: Marketingseiten
GrapesJS MJML
Erstellen Sie responsive E-Mail-Layouts mit MJML-betriebenen Komponenten.
Am besten für: E-Mail-Kampagnen
GrapesJS Blocks Basic
Fügen Sie grundlegende Inhaltsblöcke hinzu, um die Seitenerstellung zu beschleunigen.
Am besten für: Starter-Redakteure
GrapesJS Forms
Stellen Sie Drag-and-Drop-Formularfelder und Formularvorlagen bereit.
Am besten für: Bleifang
GrapesJS Tooltip
Verbessert die Editor-UX mit kontextuellen Onboardings und Hinweisen.
Am besten für: Onboarding-UX
GrapesJS Export
Exportiere HTML/CSS-Ausgaben in Dateien, Zwischenablage oder CI-Workflows.
Am besten für: Produktionsübergabe
GrapesJS vs. andere Open-Source-Entwickler
| Ausstattung | GrapesJS | Webstudio | Silex | Webiny |
|---|---|---|---|---|
| Lizenz | MIT | AGPL-3.0 | GPL-3.0 | MIT (Kern) |
| Selbstgehostet | Ja | Ja | Ja | Ja |
| Plugin-System | Vollständige API | Begrenzt | Begrenzt | Teilweise |
| React-Unterstützung | Über den Wrapper | Einheimisch | Nein | Einheimisch |
| E-Mail-Builder | Ja (MJML) | Nein | Nein | Nein |
| Aktive Entwicklung | Ja | Ja | Instandhaltung | Ja |
Häufig gestellte Fragen
Verwandte Leitfäden
Bauen Sie noch heute Ihren Open-Source-Editor-Stack auf
Beginnen Sie mit dem GrapesJS-Kern, fügen Sie gezielte Plugins hinzu und liefern Sie einen visuellen Editor aus, den Ihre Nutzer schnell übernehmen können.
Durchsuchen Sie GrapesJS-Plugins