Open-Source-Seitenbauer

Moderne Bearbeitung von UX, null Lock-in und volle Kontrolle über Ihren Produktstack.

22k+
GitHub Sterne
150k+
Wöchentliche npm-Downloads
MIT
Kernlizenz
100+
Ökosystem-Plugins
Gebaut für Teams, die schnell verschifft werden,

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

1

Definiere deine Aufgabe als Redakteur

Landingpages, E-Mails, Vorlagen oder vollständige CMS-Inhalte. Wähle zuerst eine Wahl, um Überbau zu vermeiden.

2

Installieren Sie den GrapesJS-Kern

Initialisiere zuerst mit deaktiviertem Speicher und verbinde dann deine API, sobald die UX stabil ist.

3

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.

4

Speicher- und Veröffentlichungsablauf der Karte

Behalten Sie JSON und generiertes HTML/CSS bei, damit nicht-technische Nutzer sofort veröffentlichen können.

5

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 anzeigen

Für Marketingteams

Lassen Sie nicht-technische Nutzer Seiten schneller mit wiederverwendbaren Blöcken und Vorlagen starten.

Entdecken Sie Drag-and-Drop-Workflows

Für Entwickler

Starte mit dem GrapesJS-Kern und erweitere die Fähigkeiten mit fokussierten Plugins.

Durchsuchen Sie das Plugin-Ökosystem

Entwickler-Schnellstart in 4 Schritten

1

Installiere das Kernpaket

Richte die Basis-Editor-Abhängigkeit für deine App ein.

npm install grapesjs
2

Initialisieren 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,
});
3

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 } },
});
4

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

PresetKostenlos

GrapesJS Preset Webpage

Starten Sie komplette Seiten mit Startblöcken, Panels und Stilen.

Am besten für: Marketingseiten

E-MailKostenlos

GrapesJS MJML

Erstellen Sie responsive E-Mail-Layouts mit MJML-betriebenen Komponenten.

Am besten für: E-Mail-Kampagnen

BlöckeKostenlos

GrapesJS Blocks Basic

Fügen Sie grundlegende Inhaltsblöcke hinzu, um die Seitenerstellung zu beschleunigen.

Am besten für: Starter-Redakteure

FormenKostenlos

GrapesJS Forms

Stellen Sie Drag-and-Drop-Formularfelder und Formularvorlagen bereit.

Am besten für: Bleifang

UIKostenlos

GrapesJS Tooltip

Verbessert die Editor-UX mit kontextuellen Onboardings und Hinweisen.

Am besten für: Onboarding-UX

ExportKostenlos

GrapesJS Export

Exportiere HTML/CSS-Ausgaben in Dateien, Zwischenablage oder CI-Workflows.

Am besten für: Produktionsübergabe

GrapesJS vs. andere Open-Source-Entwickler

AusstattungGrapesJSWebstudioSilexWebiny
LizenzMITAGPL-3.0GPL-3.0MIT (Kern)
SelbstgehostetJaJaJaJa
Plugin-SystemVollständige APIBegrenztBegrenztTeilweise
React-UnterstützungÜber den WrapperEinheimischNeinEinheimisch
E-Mail-BuilderJa (MJML)NeinNeinNein
Aktive EntwicklungJaJaInstandhaltungJa

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