Erstellen Sie einen E-Mail-Vorlagen-Builder mit GrapesJS

Öffnen Sie eine Vorlage vom Regal, ändern Sie sie und speichern Sie sie dann als neue. Das Regal wächst um eins. Diese Schleife – nicht die einzelnen Designs – ist das, was ein E-Mail-Vorlagen-Generator Ihren Nutzern bietet.

Die MJML-Editor-Demo, die vom GrapesJS-Projekt selbst veröffentlicht wurde. Füge einen Abschnitt hinzu, bearbeite den Text und schau dir dann das generierte Markup an.

Ein E-Mail-Vorlagen-Builder ermöglicht es Nutzern, E-Mail-Layouts visuell zu erstellen und zu ändern, anstatt HTML-Markup manuell zu schreiben. Eine Vorlagen-*Bibliothek* liefert fertige Entwürfe; ein Vorlage-*Builder* bietet die Möglichkeit, sie zu erstellen – und sie auch nach dem Versand weiterzuerstellen.

Vorlagen geben deinen Nutzern einen Ausgangspunkt. Ein Builder gibt ihnen Kontrolle.

Eine Bibliothek ist ein Regal mit einer Decke: Es deckt das ab, wofür es gebaut wurde, und Anfragen oberhalb dieser Linie haben keinen Ausweg. Ein Bauunternehmer ist eine Schleife – und das Regal wächst jedes Mal, wenn jemand darum herumgeht.

• "Wir brauchen bis Freitag eine saubere Willkommens-E-Mail."

  Gedeckt✓

  Vorlagenbibliothek

  Gelöst. Genau dafür ist eine gute Bibliothek gedacht – wähle eine, ändere die Wörter, schicke ab.

  Gedeckt✓

  Vorlagenbauer

  Auch gelöst, von denselben Ausgangspunkten aus. Ein Bauer wird mit einer Bibliothek darin verschifft.

• "Jeder Mieter braucht sein eigenes rechtliches Fundament."

  Nicht abgedeckt–

  Vorlagenbibliothek

  Ein gemeinsamer Footer oder ein Fork jeder Vorlage pro Tenant.

  Gedeckt✓

  Vorlagenbauer

  Ein-Fuß-Block, einmal pro Tenant gespeichert und in deren Vorlagen wiederverwendet.

• "Legen Sie die tatsächliche Bestellung des Kunden in den Kassenbon."

  Nicht abgedeckt–

  Vorlagenbibliothek

  Statischer Platzhalter-Text. Die Daten müssen stromabwärts eingefügt werden.

  Gedeckt✓

  Vorlagenbauer

  Eine Komponente, die an dein Bestellmodell gebunden ist, als Block editierbar und beim Senden aufgelöst wird.

• "Stellt die Version wieder, die wir letzten Dienstag geschickt haben."

  Nicht abgedeckt–

  Vorlagenbibliothek

  Das, womit die Datei überschrieben wurde, ist das, was du hast.

  Gedeckt✓

  Vorlagenbauer

  Eine Versionsreihe. Wiederherstellung ist eine Abfrage, kein archäologisches Projekt.

• "Lassen Sie unsere Kunden ihre eigenen bauen, ohne uns E-Mails zu schicken."

  Nicht abgedeckt–

  Vorlagenbibliothek

  Nicht das, was eine Bibliothek tut – sie hat keine Autorenoberfläche.

  Gedeckt✓

  Vorlagenbauer

  Der ganze Sinn. Deine Nutzer erstellen und behalten Vorlagen, die du nie siehst.

Schick die Bibliothek. Dann verschick das Ding, das mehr von ihnen macht.

Die Bearbeitungsfläche, die deine Nutzer bekommen, und die Teile davon, die du kontrollierst.

Gib den Nutzern eine Bibliothek von Abschnitten, aus denen sie zusammenstellen können, anstatt sie jede E-Mail von einer leeren Leinwand starten zu lassen. Jede ist eine Blockdefinition, die man einmal registriert.

• Header

  Logo, Text im Vortext und die Navigationszeile, falls du eine verwendest.

• Hero

  Die Eröffnungsrede und der erste Aufruf zum Handeln.

• Produktraster

  Eine Reihe oder ein Raster von Artikeln, gebunden an deinen Katalog, wo du sie haben möchtest.

• Ausstattungsliste

  Kurze Icon-und-Text-Zeilen für Release Notes und Onboarding.

• Preisgestaltung

  Planvergleich, der darauf ausgelegt ist, einen tabellenbasierten Renderer zu überstehen.

• Zeugnis

  Ein Zitat, eine Quellenangabe und ein optionaler Avatar.

• Aufruf zum Handeln

  Eine kugelsichere Taste, die ohne Hintergrundbilder rendert.

• Fuß

  Adresse, Einstellungslink und der Link zum Abmelden sind Sie gesetzlich verpflichtet anzugeben.

Standardblöcke decken das Layout ab. Was den Bauunternehmer zu Ihrem macht, sind die Komponenten, die Ihre Daten kennen – eine Bestellung, ein Abonnement, eine Buchung, eine Empfehlung.

1. Standard
2. ↓Komponiert
3. ↓Gebunden
4. ↓Ihr Datenmodell

Der Editor rendert einen Platzhalter, während die Vorlage geschrieben wird. Dein Backend tauscht die echten Werte beim Senden aus.

In einem Vorlagensystem unterscheiden sich Vorlagen danach, wer sie besitzt und wer sie ändern darf – nicht nur danach, was sie sagen. Das sind die Klassen, die es wert sind, von Anfang an modelliert zu werden.

Dies sind Eigentümerklassen in einem Vorlagensystem, keine Produkte zum Verkauf. GJS.Market listet Editor-Plugins und Presets auf; es verkauft keine E-Mail-Vorlagen.

Schauen Sie das Layout in der tatsächlichen Breite an, in denen die E-Mail tatsächlich rendert, während Sie noch bearbeiten. 600px ist die langjährige Konvention für die Spalte im Hauptteil – eine Konvention, keine Spezifikation.

Zwei Spalten auf einem Desktop-Client, gestapelt auf einem Handy – entschieden in der Vorlage, nicht durch das Raten des Empfängers.

E-Mail-Clients implementieren HTML und CSS unterschiedlich und haben das schon immer getan. Ein Visual Builder entfernt das nicht – er standardisiert den Autorenschritt, sodass jedes Mal das gleiche bekannte Markup erscheint.

Einschränkungen, wie sie auf 2026-08-28 verifiziert sind. Verhaltensänderungen; Überprüfen Sie caniemail.com den aktuellen Zustand und testen Sie Produktions-E-Mails mit den Kunden, die Ihr eigenes Publikum tatsächlich nutzt.

mjml existiert, um responsives E-Mail-Markup zu etwas zu machen, das du selbst erstellst, anstatt es manuell zu warten. GrapesJS kann mit grapesjs-mjml erweitert werden, um eine visuelle Bearbeitungsfläche darauf zu legen.

Die Frage, die entscheidet, ob du einen Builder oder einen Viewer hast: Welche Zeilen existieren, nachdem ein Nutzer auf Speichern klickt? Drei Tabellen decken das ab.

Der Editor ist ein Client. Er fragt deine API nach einer Vorlage und gibt eine zurück; er erfährt nie, wer deine Tenants sind, und hält nie die einzige Kopie von irgendetwas.

// Storage scoped to the tenant AND the template. The editor never learns who
// the tenant is — your API does, from the session, and refuses everything else.
editor.Storage.add('remote', {
  async load({ templateId }) {
    const res = await fetch(`/api/templates/${templateId}/project`);
    return res.json();
  },
  async store(project, { templateId }) {
    await fetch(`/api/templates/${templateId}/project`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(project),
    });
  },
});

Integriere den Editor mit dem Backend, das du bereits benutzt, anstatt deinen E-Mail-Workflow auf eine andere Plattform zu verlagern. GJS.Market verkauft Editor-Plugins – es hostet deine Vorlagen nicht und sendet deine E-Mails nicht.

In dem Moment, in dem ein zweiter Kunde eine Vorlage speichert, hört das Eigentum auf, ein Detail zu sein. Drei Ebenen decken fast jedes Produkt ab.

Dasselbe Template-System, auf verschiedene Jobs gerichtet.

Die Bearbeitungsleinwand ist der sichtbare Teil. Ein Vorlagensystem ist der Rest – und der Rest ist der Zeitpunkt.

Woraus ein Vorlagensystem besteht

• Editor-Canvas
• Drag & Drop
• Blockregister
• Komponentenmodell
• Stilsteuerung
• Responsive Vorschau
• Vermögensverwaltung
• Vorlage CRUD
• Versionierung und Wiederherstellung
• Merge-Tag-Validierung
• Mieterabgrenzung
• Rückgängig machen und neu machen
• HTML-Export
• MJML-Kompilation
• Laufende Clientstests

GrapesJS gibt dir die Bearbeitungsebene. Das darauf liegende Vorlagensystem – Eigentum, Versionierung, Mietverhältnisse – gehört dir und sollte es sein: Es ist der Teil, der zu deinem Produkt passt.

Echte Angebote aus dem Katalog, gruppiert nach ihrer Arbeit innerhalb eines Vorlagensystems. Namen und Preise stammen direkt vom Markt, daher kann hier nichts von dem abweichen, was tatsächlich zum Verkauf steht.

Die Bibliothek selbst

Speichern, Auflisten und Wiederöffnen von Vorlagen – das Thema dieser Seite.

Durchstöbern Sie diese Kategorie

Vorlagen

Templates Manager

Fügt die Speicher-, Listen- und Wiederöffnen-Oberfläche hinzu, die eine Vorlagenbibliothek benötigt, sodass Benutzer keine Vorlagen in einer Tabelle verwalten.

39,00 $View-Plugin

Ausgangspunkte

Wie eine neue Vorlage beginnt, bevor jemand eine gespeichert hat.

Durchstöbern Sie diese Kategorie

Preset

MJML Preset

Bringt MJML-Komponenten in den Editor, live kompiliert, sodass responsives Markup generiert und nicht handgeschrieben wird.

KostenlosView-Plugin

Preset

Newsletter Preset

Der Pre-MJML-Pfad: tabellenbasierte E-Mail-Blöcke und ein CSS-Inliner, ohne Kompilierungsschritt dazwischen.

KostenlosView-Plugin

Blöcke

Die Abschnitte, aus denen eine Vorlage zusammengesetzt und wieder zusammengesetzt wird.

Durchstöbern Sie diese Kategorie

Blöcke

GrapesJS Email Blocky – Premium Responsive Email Blocks

Ein großer Satz von e-mail-sicheren Blöcken, sodass Ihre Nutzer mit echten Abschnitten beginnen und nicht mit einer leeren Spalte.

69,00 $View-Plugin

Die Fluchtluke

Für den Teil einer Vorlage, der handschriftlich sein muss.

Durchstöbern Sie diese Kategorie

Code

Grapesjs Component Code Editor

Ermöglicht es einem Entwickler, das HTML und CSS einer ausgewählten Komponente zu bearbeiten, ohne die gesamte Vorlage zu öffnen.

KostenlosView-Plugin

Wo Vorlagen liegen

Verkabele den Speicher des Editors an ein Backend, das du kontrollierst.

Durchstöbern Sie diese Kategorie

Speicher

Grapesjs Firebase Storage

Es speichert Projektdaten in Firebase, die je nach der Eingabe deiner App ihre Vorlagen einführt.

KostenlosView-Plugin

Speicher

Directus Storage

Speichert Projektdaten in Directus, was praktisch ist, wenn Vorlagen neben deinen anderen Inhalten liegen.

KostenlosView-Plugin

Assets

Die Bilder, auf die sich eine Vorlage bezieht, muss die Vorlage überdauern.

Durchstöbern Sie diese Kategorie

Assets

Grapesjs Cloudinary

Das weist den Asset-Manager auf Cloudinary hin, sodass Template-Bilder von einem Ort aus transformiert und bereitgestellt werden.

KostenlosView-Plugin

Uploads

Grapesjs Uppy

Fügt einen umfassenderen Upload-Flow für die Bilder hinzu, die deine Nutzer in eine Vorlage einfügen.

KostenlosView-Plugin

Übergabe

Eine fertige Vorlage aus dem System zu bekommen.

Durchstöbern Sie diese Kategorie

Export

Export Zip

Paketiert die gerenderte Ausgabe für die Übergabe an ein System, das Dateien statt eines API-Aufrufs erwartet.

KostenlosView-Plugin

Vier Kombinationen, die bereits zusammenarbeiten, ausgewählt nach wessen Vorlagenbibliothek du baust.

Die Preise werden beim Bau live aus dem Katalog vorgelesen.

GrapesJS ist die Bearbeitungsebene und endet beim HTML. Alles danach ist dein Backend und der Anbieter, den du bereits bezahlst – im Editor gibt es kein eingebautes Senden, und hier wird auch nichts angedeutet.

Der Editor Core plus das offizielle MJML-Plugin. Beide sind BSD-3-Clause.

import grapesjs from 'grapesjs';
import grapesjsMjml from 'grapesjs-mjml';
import 'grapesjs/dist/css/grapes.min.css';

// One editor instance per template being edited. The template id — not a page
// id — is what every load and store call is keyed by.
const editor = grapesjs.init({
  container: '#template-editor',
  plugins: [grapesjsMjml],
  pluginsOpts: {
    [grapesjsMjml]: {
      imagePlaceholderSrc: 'https://cdn.your-app.com/email/placeholder.png',
    },
  },
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
  },
});

// "Save as new template" — a row your customer owns from now on.
async function saveAsTemplate(name) {
  const res = await fetch('/api/templates', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name,
      project: editor.getProjectData(), // re-openable in the editor
    }),
  });
  return res.json(); // { id, name, version: 1 }
}

// Editing an existing template appends a version rather than overwriting it,
// so "restore the version we sent last Tuesday" stays a query, not a restore.
async function saveVersion(templateId) {
  await fetch(`/api/templates/${templateId}/versions`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ project: editor.getProjectData() }),
  });
}

1. Installiere den Core und das MJML-Plugin
2. →Mounte den Editor, der mit Vorlagen-ID aktiviert ist
3. →Registrieren Sie Ihre Blöcke und gebundenen Komponenten
4. →Verdrahte Speicher an deine eigene API
5. →Fügen Sie Save-as-Template und Versionsmanagement hinzu
6. →Geben Sie das gerenderte HTML Ihrem Anbieter

Framework-Details befinden sich auf ihren eigenen Seiten – diese Seite bleibt absichtlich framework-neutral.

Teams, bei denen die Erstellung von E-Mails innerhalb ihres Produkts stattfinden muss und nicht daneben.

Diese Seite handelt vom Vorlagensystem. Diese behandeln die benachbarten Fragen.

Beginnen Sie mit GrapesJS, gestalten Sie das Bearbeitungserlebnis rund um Ihr Produkt und erweitern Sie es mit den Plugins, die Ihr Vorlagensystem benötigt.

Verwandte Literatur