HTML-E-Mail-Builder: welcher zu welchem Team passt

Erst klären, wer die Vorlage pflegt

„HTML-E-Mail-Builder“ meint fünf verschiedene Dinge: einen Compiler, der aus Komponenten E-Mail-HTML erzeugt, einen visuellen Editor für Kampagnen, einen Editor zum Einbetten in ein Produkt, einen Testdienst für Vorschauen und eine Versandplattform mit eingebautem Editor. Wer sie in eine Tabelle stellt, vergleicht Äpfel mit Birnen. Besser ist die Reihenfolge, in der Teams tatsächlich entscheiden: Wer besitzt die Quelle? Wer ändert Texte und Bilder? Wohin geht das fertige HTML? Und woran erkennen Sie, dass es in Postfächern funktioniert?

Wenn Entwickler die Vorlagen verantworten

MJML ist die schmalste Einstiegsform: eine Markup-Sprache mit Komponenten für Abschnitt, Spalte, Text und Button, die zu tabellenbasiertem E-Mail-HTML kompiliert. Es steht laut FAQ unter MIT-Lizenz. Das Minimalbeispiel aus der MJML-Dokumentation sieht so aus:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Ihre Bestellung ist unterwegs.</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

React Email beschreibt E-Mails als React-Komponenten und ist laut GitHub-Repository MIT-lizenziert. Es lohnt sich, wenn dieselben Typen und Props, die Ihre Oberfläche nutzt, auch die Mails füttern sollen. Maizzle setzt auf Vue-Komponenten und Tailwind CSS und bringt eine eigene Build-Pipeline mit; die Einführung nennt es ein modernes Framework für HTML-E-Mails. Für alle drei gilt: Kompilieren heißt noch nicht, dass die Mail im Client stimmt, und der Aufwand liegt in CI, Vorschau und Anbindung an den Versand, nicht in der Lizenz. Parcel ist die Zwischenlösung: ein Code-Editor mit Vorschau, dessen Preisseite einen kostenlosen Tarif für Code-E-Mails nennt, danach 29 $ und 56 $ je Nutzer und Monat.

Ein praktisches Detail für deutschsprachige Mails: Lange Komposita sprengen schmale Spalten. Die CSS-Eigenschaft hyphens löst das nur dort, wo der Client sie kennt. caniemail.com führt sie für Apple Mail und Samsung Email als unterstützt, für Gmail und die Outlook-Clients als nicht unterstützt. Planen Sie daher Überschriften und Buttons so, dass sie auch ohne Silbentrennung passen, und setzen Sie im Kopf der Vorlage <meta charset="utf-8">, damit Umlaute und ß nicht zerfallen. Mehr zu den CSS-Grenzen steht im Leitfaden zu CSS in E-Mails.

Wenn Marketing ohne Code arbeiten soll

Hier zählen Exportgrenzen mehr als die Zahl der Bausteine. Stripos Preisseite nennt den kostenlosen Tarif für 0 $ mit zwei Mitgliedern, vier Exporten im Monat und zehn gespeicherten E-Mails; Basic kostet 20 $ im Monat und erlaubt 50 Exporte, Medium 45 $ mit 300 Exporten und drei Mitgliedern, Pro 125 $ mit 4.000 Exporten und zehn Mitgliedern. Bei jährlicher Zahlung spart man 20 %. Der kostenlose Tarif ist laut Seite für Vorlagen gedacht, nicht für den Export in Versanddienste. Beefree bietet den Tarif Starter für 0 $ mit bis zu 10 Designs und 6 Exporten im Monat, Professional kostet 30 $ und Business 160 $ im Monat. Postcards arbeitet mit fertigen Modulen; ich habe hier keinen geprüften Preis dafür, deshalb nennt der Artikel keinen.

Ein Rechenbeispiel: Ein Newsletter pro Monat verbraucht bei Beefree Starter einen von sechs Exporten, das reicht auch mit zwei Korrekturschleifen. Ein wöchentlicher Newsletter braucht vier bis fünf Ausgaben, und wenn jede Fassung, die Sie in den Versanddienst übertragen, als Export zählt (prüfen Sie das in den Bedingungen), ist der Spielraum aufgebraucht, bevor jemand korrigiert hat. Eine Agentur mit acht Mitarbeitenden, die Vorlagen für mehrere Kunden pflegt, überschreitet bei Stripo die drei Mitglieder von Medium und landet bei Pro mit 125 $; bei jährlicher Zahlung rechnet die Seite mit 20 % Nachlass.

Wie sich die beiden Marktführer unterscheiden, zeigt Stripo gegen Beefree, für Vorlagenbibliotheken lohnt Postcards gegen Stripo.

Wenn Ihr Produkt einen Editor enthalten soll

Eingebettete Editoren werden nicht pro Kampagne, sondern pro Produkt bezahlt. Topol rechnet in vorausbezahlten Nutzern: Startup kostet 70 $ im Monat für 50 Nutzer, Expansion 140 $ für 100, Business 300 $ für 500. Das ergibt 1,40 $, 1,40 $ und 0,60 $ je vorausbezahltem Nutzer, zusätzliche Nutzer kosten 1,60 $, 1,40 $ und 0,70 $. Unlayer beginnt bei 250 $ im Monat, danach folgen 750 $ und 2.000 $, jeweils mit 14 Tagen Testzeit und 1 TB Bandbreite. Chamaileon nennt „ab 4.000 $ im Jahr oder 400 $ im Monat“, inklusive Einführung und Aufbau eines E-Mail-Designsystems. Wie die Einbindung aussieht, zeigt das Beispiel aus dem README von react-email-editor von Unlayer:

import { useRef } from 'react';
import EmailEditor from 'react-email-editor';

const App = () => {
  const emailEditorRef = useRef(null);

  const exportHtml = () => {
    const unlayer = emailEditorRef.current?.editor;

    unlayer?.exportHtml((data) => {
      const { design, html } = data;
      console.log('exportHtml', html);
    });
  };

  const onReady = (unlayer) => {
    // Editor ist bereit; hier kann eine gespeicherte Vorlage geladen werden
  };

  return (
    <div>
      <button onClick={exportHtml}>Export HTML</button>
      <EmailEditor ref={emailEditorRef} onReady={onReady} />
    </div>
  );
};

Die Lizenz ist nur die halbe Rechnung. Entscheidend sind Speichern, Wiederöffnen und Export pro Mandant, eigene Blöcke und die Frage, wer die Kunden-Designs hostet. Beschaffen Sie sich vor dem Kauf einen Prototyp, der genau diese Wege einmal durchläuft.

Wenn Builder und Versand zusammengehören

Mailchimp und Brevo liefern Editor, Listen und Versand aus einer Hand. Mailchimps Preisseite nennt einen kostenlosen Tarif für bis zu 250 Kontakte und 500 Sendungen im Monat, Standard beginnt bei 20 $ im Monat bei 500 Kontakten. Brevo nennt einen Gratisplan mit 300 Sendungen am Tag, Starter ab 9 $ und Standard ab 18 $ im Monat, jeweils ab 5.000 E-Mails. Der Vorteil ist, dass kein HTML zwischen zwei Systemen wandert; der Nachteil, dass Vorlagen im Editor des Anbieters leben und ein Wechsel Arbeit bedeutet.

Vier Stacks, durchgerechnet

Zwei Dinge fallen auf. Am günstigsten ist der Weg, den Entwickler besitzen; der Sprung nach oben liegt nicht zwischen zwei visuellen Buildern, sondern zwischen einem Builder, den Sie nutzen, und einem Editor, den Sie Ihren Kunden anbieten. Und der Darstellungstest kostet in einem kleinen Entwickler-Stack mehr als alles andere zusammen. Email on Acid nennt zudem, dass Abonnenten ab Juni 2026 zu Mailgun Inspect wechseln; prüfen Sie auf der Preisseite, welches Produkt Sie tatsächlich kaufen.

Der Test, der mehr taugt als eine Demo

1. Eine echte Nachricht wählen: eine Willkommens- oder Rechnungsmail mit Logo, Button, Platzhalter und Pflichtangaben im Fuß.
2. In zwei Kandidaten bauen und notieren, wie lange der erste Entwurf dauert und ob jemand aus der Technik helfen musste.
3. Den echten Übergabeweg gehen: exportieren oder kompilieren, in den Versanddienst laden, Platzhalter und Abmeldelink prüfen.
4. Die zugestellte Mail ansehen: Gmail, Outlook und Apple Mail, mobil und am Desktop, auch im Dunkelmodus. Hinweise dazu stehen im Artikel zum Dunkelmodus.
5. Kosten bei heutigem und doppeltem Volumen aufschreiben, samt Sitzen, Exporten und Vorschau-Kontingenten.

Wer danach noch zwischen zwei Tools schwankt, findet Einzelvergleiche unter Vergleiche, zum Beispiel MJML gegen React Email. Für den Versand selbst lesen Sie Transaktionale und Marketing-E-Mails und den Leitfaden zur Zustellbarkeit.