Baue einen React-E-Mail-Builder mit GrapesJS

Kein gehosteter Editor, den du mietest, und keine Vorlagengalerie. Eine Bearbeitungsebene, die du in der bereits laufenden Anwendung montierst.

Diese Leinwand ist eine React-Komponente, die auf dieser Seite läuft – kein Editor-Bundle, kein iframe. Füge einen Block hinzu, klicke auf einen beliebigen Abschnitt, um ihn auszuwählen, tippe den Text an Ort und Stelle neu ein, formatiere ihn neu, ordne ihn neu und wechsle die Vorschau zwischen Desktop, Tablet und Mobilgerät. Öffne den HTML-Tab, um zu sehen, welche Art von Markup ein E-Mail-Builder deinem Code zurückgibt.

Das Newsletter-Preset: e-Mail-sichere Blöcke, ein Restricted Style Manager und tabellenbasierte Ausgabe. Das ist das, was Ihre Nutzer sehen würden, am nächsten.

Ein React-E-Mail-Builder ist ein visueller Editor, der in einer React-Anwendung läuft und es den Nutzern ermöglicht, E-Mail-Vorlagen zu erstellen und anzupassen, ohne ein HTML-E-Mail-Markup manuell zu schreiben. Es ist kein separates Produkt, in das sich Ihre Nutzer einloggen: Es ist eine Komponente Ihrer App, sodass die Vorlagen, die Konten, die sie besitzen, und die Infrastruktur, die sie sendet, alle auf Ihrer Seite bleiben.

Die Aufgabe des Editors besteht darin, Markup zu erstellen. Alles davor und danach ist deine Anwendung.

In all diesen Fällen ist die Alternative, dass ein Entwickler jedes Mal eine Vorlage von Hand bearbeitet, wenn jemand im Unternehmen eine Änderung möchte.

Es ist das Schnittfundament, nicht das fertige Produkt. Dieser Unterschied ist der Punkt: Alles darunter ist ein Aufhänger, auf dem du aufbaust, statt ein Feature, das du als gegeben annimmst.

GrapesJS stellt die visuelle Bearbeitungsebene bereit. Ihre React-Anwendung behält die Kontrolle über Nutzer, Daten, Speicher und Veröffentlichung – das ist das ganze Argument dafür, einen Editor einzubetten, anstatt Leute an jemand anderen zu schicken.

Einen Editor in das Produkt eines anderen einzubetten, wirft eine andere Reihe von Fragen auf.

Beide Wege enden an derselben Stelle. Der einzige wirkliche Unterschied ist, wo das Modul bewertet werden darf.

Drei Pakete und eine Komponente. Alles danach – Speicher, benutzerdefinierte Blöcke, MJML – wird weiter unten auf der Seite abgedeckt.

import GjsEditor from '@grapesjs/react';
import newsletter from 'grapesjs-preset-newsletter';
import 'grapesjs/dist/css/grapes.min.css';

// A normal React component. The editor is a child of your tree, so your
// router, your auth context and your providers all still wrap it.
export default function EmailBuilder({ template, onSave }) {
  return (
    <GjsEditor
      options={{
        height: '100vh',
        // Storage is wired to your own API further down this page.
        storageManager: false,
        plugins: [newsletter],
        projectData: template,
      }}
      onEditor={(editor) => {
        // Everything the user builds comes back out as plain data you can
        // put straight into React state or POST to your backend.
        editor.on('update', () => {
          onSave({
            html: editor.getHtml(),
            css: editor.getCss(),
            project: editor.getProjectData(),
          });
        });
      }}
    />
  );
}

// app/emails/page.tsx  (or pages/emails.tsx)
import dynamic from 'next/dynamic';

// GrapesJS reaches for window/document as it initialises, so it can only run
// in the browser. In Next.js that means one dynamic import with ssr: false —
// this is the whole of the Next.js-specific work.
const EmailBuilder = dynamic(() => import('@/components/EmailBuilder'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

export default function EmailsPage({ template }) {
  return <EmailBuilder template={template} onSave={saveTemplate} />;
}

1. Initialisieren Sie den Editor innerhalb einer React-Komponente
2. →Füge ein E-Mail-Preset hinzu, damit die Blöcke und Stile e-mail-sicher sind
3. →Registrieren Sie die Blöcke, die Ihr Produkt benötigt
4. →Konfigurieren Sie den Speicher an Ihrer eigenen API
5. →HTML exportieren oder MJML auf dem Server kompilieren
6. →Übergeben Sie das Ergebnis Ihrem sendenden Anbieter

Die oben genannten Versionen wurden mit den veröffentlichten Paketen auf 2026-09-03 abgeglichen: grapesjs 0.23.6 ist BSD-3-Clause; @grapesjs/react ist MIT.

Diese stammen aus dem Editor-Kern und dessen E-Mail-Voreinstellungen, nicht von etwas, das du schreiben musst.

MJML existiert, um responsive E-Mail-Markups von Hand schreibbar zu machen. Ein visueller Builder darauf sorgt dafür, dass niemand das tun muss. GrapesJS enthält MJML nicht im Kern – ein Plugin fügt MJML-Komponenten in den Editor hinzu, sodass das Projekt zu MJML statt zu einfachem HTML serialisiert.

// pages/api/email/compile.ts
//
// mjml is a Node package — it parses and renders on the server, not in the
// browser. So the editor produces MJML in the client and this route turns it
// into the table-based HTML that email clients actually accept.
import mjml2html from 'mjml';

export default function handler(req, res) {
  const { html, errors } = mjml2html(req.body.mjml, {
    validationLevel: 'soft',
    keepComments: false,
  });

  // MJML reports what it could not understand rather than failing silently.
  if (errors.length) console.warn('[mjml]', errors);

  res.status(200).json({ html });
}

Der Compiler ist ein Node-Paket, daher gehört die Kompilierung auf den Server – Next.js eine gewöhnliche API-Route. Die umgekehrte Richtung ist nicht symmetrisch: Beliebiges HTML wird nicht sauber in MJML zurückkonvertiert, also wählen Sie das Format, das Ihr Workflow benötigt, bevor Sie darauf aufbauen.

Der Editor gibt deinem Code drei verschiedene Dinge, und eine React-Anwendung möchte normalerweise alle drei zu unterschiedlichen Zeitpunkten haben.

Hier zieht ein Embedded-Builder einem generischen E-Mail-Tool voraus: Die Blöcke können über Ihre Domain Bescheid wissen. Ein Block ist kein Bild einer Produktkarte – er kann das Produkt nachschlagen.

Um genau zu sein, was das ist: Eine beliebige React-Komponente wird nicht in eine E-Mail-Komponente umgewandelt. JSX rendert einen DOM-Baum, und E-Mail-Clients akzeptieren den Großteil davon nicht. Was du schreibst, ist ein GrapesJS-Komponententyp, dessen ToHTML e-Mail-sicheres Markup ausbreitet und dessen Traits auf einen Datensatz abgebildet werden, den deine Anwendung besitzt. Die Verkabelung gehört dir; der Editor stellt den Platz zur Verfügung.

Reduziere repetitive Designarbeit, indem du die Abschnitte versendest, die dein Produkt tatsächlich sendet, statt eines generischen Sets, das deine Nutzer jedes Mal anpassen müssen.

Eine Vorlage ist einfach ein gespeichertes Projektdokument, daher bedeutet das Ausliefern einer Starterbibliothek, dass Zeilen geseedet und eine als projectData geladen werden, wenn ein Benutzer sie auswählt. Das sind die Kategorien, die die meisten Produkte am Ende benötigen:

Dies sind Layout-Kategorien, keine zum Verkauf stehenden Produkte. GJS.Market listet E-Mail-Presets, Blockpacks und Vorlagenmanager auf – es verkauft keine fertigen E-Mail-Designs, und diese Seite zeigt Ihnen keine Karten für Produkte an, die nicht existieren.

Nutzer wechseln die Gerätebreite beim Bearbeiten, und die Leinwand wird auf dieser Breite neu gestaltet. E-Mail-Breiten sind schmaler als Web-Breiten: 600px ist seit Jahren das sichere Desktop-Maximum.

Eine Vorschau ist eine Vorschau. Sie zeigt, wie das Markup neu fließt, nicht wie ein bestimmter Client es rendert – das ist der nächste Abschnitt.

E-Mail-Clients implementieren HTML und CSS unterschiedlich und tun das seit zwanzig Jahren. Ein Visual Builder standardisiert den Autoren-Workflow; er zwingt die Kunden nicht dazu, sich gegenseitig zu einigen.

Verbinde den Editor mit dem Backend und dem Datenmodell, das du bereits hast. Deine Nutzer, deine Authentifizierung, deine Datenbank, deine Berechtigungen und dein Veröffentlichungs-Workflow bleiben genau dort, wo sie sind.

// The editor asks your API for a template and hands it back on save.
// Your users, your auth, your database, your permissions — unchanged.
const options = {
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 5,
    options: {
      remote: {
        urlStore: `/api/email-templates/${templateId}`,
        urlLoad: `/api/email-templates/${templateId}`,
        // Your existing session cookie is all the auth it needs.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
};

// pages/api/email-templates/[id].ts — an ordinary Next.js route handler.
export default async function handler(req, res) {
  const session = await getSession(req);
  if (!session) return res.status(401).end();

  if (req.method === 'POST') {
    await db.emailTemplate.update({
      where: { id: req.query.id, orgId: session.orgId },
      data: { project: req.body },
    });
    return res.status(200).json({ ok: true });
  }

  const row = await db.emailTemplate.findFirst({
    where: { id: req.query.id, orgId: session.orgId },
  });
  return res.status(200).json(row?.project ?? {});
}

GJS.Market hostet deine Vorlagen nicht, speichert deine Daten nicht und sendet keine E-Mails. Es verkauft Plugins für einen Editor, den du selbst betreibst.

Passe das Bearbeitungserlebnis so an, bis es als nativer Teil deiner React-Anwendung gelesen wird und nicht als ein Third-Party-Panel, das darin eingeschraubt ist. Es gibt von vornherein kein Herstellerbranding, das entfernt werden muss.

Was du ändern kannst

• Werkzeugleiste und Schaltflächen
• Tafeln und ihr Aufbau
• Blockpalette und Kategorien
• Komponententypen und -merkmale
• Style-Manager-Sektoren
• Befehle und Tastenkürzel
• Die umgebende React-Benutzeroberfläche

Die gründlichste Version ist, den Editor headless auszuführen und die gesamte Benutzeroberfläche selbst in React zu bauen, wobei der Editor nur für die Leinwand und das Modell verwendet wird.

Es ist eine sinnvolle Entscheidung, bis die Liste der Teile aufgeschrieben ist. Jeder folgende Punkt ist etwas, das ein E-Mail-Editor braucht, bevor es nutzbar ist – kein Nett-zu-haben.

Woraus ein E-Mail-Editor gemacht ist,

• Leinwand bearbeiten
• Auswahl und Treffertests
• Drag & Drop
• Komponentenmodell
• Blocksystem
• Style Manager
• Reaktionsschnelle Steuerung
• Vermögensverwalter
• Template-Speicherung
• Geschichte rückgängig machen / neu machen
• Serialisierung
• HTML-Export
• MJML-Integration
• Vorschau
• Laufende Wartung

Baue dein E-Mail-Produkt — nicht noch einen Editor von Grund auf. Wir nennen dafür bewusst keine Zahl eingesparter Monate: wie lange es dein Team kosten würde, hängt von deinem Team ab.

Jedes untenstehende Angebot ist ein echtes Produkt mit einer Live-Seite, dessen Name, Preis und Thumbnail direkt aus dem Katalog gerendert werden – daher darf auf dieser Seite nichts mit dem tatsächlich zum Verkauf stehenden Produkt abweichen.

React UI

Die Ebene, um die sich diese Seite dreht: React-Oberflächen, die um den Editor-Kern herum gebaut sind, für Teams, die möchten, dass die umliegende Benutzeroberfläche React ist und nicht die Standard-Panels.

Durchstöbern Sie diese Kategorie

React UI

React UI for GrapesJS

Eine React-Oberfläche rund um den Editor für Teams, die lieber Komponenten erweitern als Panels konfigurieren.

KostenlosView-Plugin

React-Preset

Reactor Preset for GrapesJS

Ein React-orientiertes Preset, das als Ausgangspunkt dient, wenn die umliegende Anwendung bereits React ist.

KostenlosView-Plugin

Reaktionsschale

GrapesJS Shadcn

Eine vollständige React-Oberfläche, die auf einer vertrauten Komponentenbibliothek basiert, für Produkte, die möchten, dass der Editor dem Rest ihrer Benutzeroberfläche entspricht.

850,00 $View-Plugin

E-Mail-Presets

Ersetzen Sie die Standard-Webblöcke durch e-mail-sichere und schränken Sie den Style-Manager auf Eigenschaften ein, die E-Mail-Clients ehren. Das ist es, was den Editor zu einem E-Mail-Editor macht.

Durchstöbern Sie diese Kategorie

MJML

MJML Preset

Fügt dem Editor MJML-Komponenten hinzu, sodass das Projekt zu MJML serialisiert und auf deinem Server zu responsivem HTML kompiliert.

KostenlosView-Plugin

E-Mail-Voreinstellung

Newsletter Preset

Der Ausgangspunkt für E-Mails: e-Mail-sichere Blöcke, ein verengter Stil-Manager und tabellenbasierte Ausgabe.

KostenlosView-Plugin

E-Mail-Voreinstellung

Whitener Preset GrapesJS

Ein alternatives E-Mail-Preset, das es wert ist, mit dem Newsletter zu vergleichen, bevor man sich auf einen Blockwortschatz festlegt.

KostenlosView-Plugin

Blöcke und Vorlagen

Fertige Abschnitte und ein Manager zum Speichern und Neuladen von Vorlagen, damit deine Nutzer nicht jede E-Mail aus Primitiven zusammenstellen.

Durchstöbern Sie diese Kategorie

E-Mail-Sperren

GrapesJS Email Blocky – Premium Responsive Email Blocks

Eine größere Auswahl an fertigen E-Mail-Abschnitten, sodass Ihre Nutzer aus fertigen Teilen statt aus Primitiven zusammensetzen.

69,00 $View-Plugin

Vorlagen

Templates Manager

Speichern, listen und laden Sie Projekte neu – die Mechanismen hinter der Auslieferung einer Starter-Vorlagenbibliothek an Ihre Nutzer.

39,00 $View-Plugin

Code-Zugriff

Für die Momente, in denen ein Entwickler das Markup eines Abschnitts sehen oder manuell bearbeiten muss.

Durchstöbern Sie diese Kategorie

Code

Grapesjs Component Code Editor

Zeigt das Markup, das eine ausgewählte Komponente erzeugt, für die Momente, in denen ein Entwickler es direkt sehen oder bearbeiten muss.

KostenlosView-Plugin

Speicheradapter

Verdrahte den Storage Manager an ein Backend, ohne den Adapter zu schreiben, falls der von dir verwendete bereits abgedeckt ist.

Durchstöbern Sie diese Kategorie

Lagerung

Grapesjs Firebase Storage

Persistiert Projekte in Firebase, ohne selbst einen Speicheradapter zu schreiben.

KostenlosView-Plugin

Lagerung

Directus Storage

Persistiert Projekte auf ein Directus-Backend, falls dort bereits dein Inhalt liegt.

KostenlosView-Plugin

Vermögenswerte

Bild-Upload und Medienverwaltung, die auf Dienste gerichtet sind, die bereits von Teams betrieben werden, statt auf lokale Dateien.

Durchstöbern Sie diese Kategorie

Vermögenswerte

Grapesjs Cloudinary

Das verweist auf den Asset Manager bei Cloudinary, sodass E-Mail-Bilder von einem Dienst stammen, der sie transformieren und bedienen kann.

KostenlosView-Plugin

Uploads

Grapesjs Uppy

Ein umfassenderes Upload-Erlebnis im Asset Manager, einschließlich Quellen über den lokalen Dateiwähler hinaus.

KostenlosView-Plugin

Export

Das fertige Markup aus dem Editor zu bekommen und in das zu bringen, was als Nächstes in deiner Pipeline kommt.

Durchstöbern Sie diese Kategorie

Export

Export Zip

Paketiert das generierte Aufschlagen und die Assets, um es an das Weitergeben zu geben, was als Nächstes in Ihrer Pipeline kommt.

KostenlosView-Plugin

Vier Kombinationen, die auf reale Anforderungen abgebildet sind. Jede gezeigte Auflistung existiert – es gibt kein imaginäres Plugin, das eine Lücke in einem Diagramm füllt.

Die Preise stammen aus dem Katalog zum Bauzeitpunkt.

Das Muster wiederholt sich bei Produkten, die sonst nichts gemeinsam haben.

Der Editor erstellt die E-Mail. Deine Infrastruktur sendet sie. Diese Zeile klar zu halten, macht den Rest dieser Architektur einfach.

Beispiele für Anbieter, die Teams an

• Amazon SES
• SendGrid
• Kettengewehr
• Poststempel

Sie werden als Beispiele genannt, wo das Markup landet, nicht als integrierte Integrationen. Weder GrapesJS noch GJS.Market liefern für einen von ihnen einen Connector; Sie rufen deren SDK von Ihrem eigenen Backend aus, wie Sie es bereits für den Rest Ihrer E-Mail tun.

Das ist ein architektonischer Kompromiss, kein Scoreboard. Die rechte Spalte sagt ehrlich gesagt "kommt darauf an": Gastgehostete Editoren unterscheiden sich voneinander und ändern ihre Begriffe, und wir werden keine konkrete Antwort für sie erfinden.

Die GrapesJS-Spalte wurde im Vergleich zu grapesjs, 0.23.6 und @grapesjs/react auf 2026-09-03 überprüft. Für einen Vergleich mit einem bestimmten benannten Anbieter mit dessen veröffentlichten Preisen siehe die spezielle Seite.

Nachbarseiten, die denselben Editor in eine andere Richtung lenken.

Beginnen Sie mit GrapesJS, integrieren Sie es in Ihre React-Anwendung und erweitern Sie den Editor um die E-Mail-Plugins, die Ihr Produkt tatsächlich benötigt.