Maizzle vs MJML: Mit welchem Framework bauen Sie Ihre E-Mails?

Dieselbe Willkommens-E-Mail in beiden Frameworks

Die Dokumentation von Maizzle enthält eine Migrationsseite für Umsteiger von MJML, auf der dieselbe E-Mail in beiden Varianten steht. Die beiden Blöcke unten stammen von dieser Seite, dem Maizzle-Leitfaden für MJML-Nutzer. Dort finden Sie auch eine Zuordnungstabelle der Komponenten, an der sich schnell ablesen lässt, wie weit die beiden Vokabulare tatsächlich auseinanderliegen.

MJML

<mjml>
  <mj-head>
    <mj-title>Welcome to Acme</mj-title>
    <mj-preview>Let's get you set up.</mj-preview>
    <mj-attributes>
      <mj-all font-family="Helvetica, Arial, sans-serif" />
      <mj-text color="#475569" font-size="16px" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#ffffff">
    <mj-section>
      <mj-column>
        <mj-text font-size="24px" color="#0f172a">Hi {{ name }}</mj-text>
        <mj-text>Thanks for signing up. Click below to verify your email.</mj-text>
        <mj-button href="https://example.com/verify" background-color="#2563eb">
          Verify email
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Maizzle

<script setup>
  defineProps({ name: String })

  useHead({ title: 'Welcome to Acme' })
</script>

<template>
  <Html>
    <Head />
    <Preheader>Let's get you set up.</Preheader>
    <Tailwind>
      <Body class="text-gray-600 text-base bg-white font-sans">
        <Container class="max-w-lg">
          <Text class="text-2xl text-gray-950">Hi {{ name }}</Text>
          <Text>Thanks for signing up. Click below to verify your email.</Text>
          <Button href="https://example.com/verify" class="bg-blue-600 text-white">
            Verify email
          </Button>
        </Container>
      </Body>
    </Tailwind>
  </Html>
</template>

Drei Unterschiede fallen auf. Das Styling wandert von Attributen an jedem Tag zu Tailwind-Klassen. Der Kopfbereich der Seite entsteht mit useHead() und einer Preheader-Komponente statt mit mj-title und mj-preview. Und {{ name }} ist kein Platzhalter mehr, den Sie erst später füllen: In Maizzle ist es eine Vue-Prop, dieselbe Datei kann also für jeden übergebenen Namen gerendert werden, und das komplette Vue-Werkzeug (Bedingungen, Schleifen, berechnete Werte) steht drum herum zur Verfügung.

Wo sich beide im Alltag unterscheiden

Dynamische Inhalte

MJML kennt keine eigenen Variablen. Die MJML-Dokumentation verweist darauf, Template-Syntax in mj-raw zu setzen, und warnt, dass die Minifizierung an Zeichen wie < in diesen Tags scheitern kann; das umgehen Sie mit htmlmin:ignore-Kommentaren. In der Praxis kompilieren Sie zuerst und lassen dann Handlebars, Liquid oder eigenen Code über das fertige HTML laufen. Maizzle rendert seine Vue-Komponenten per Server-Side-Rendering, die Logik läuft also während des Builds, und der Build kann zusätzlich eine Nur-Text-Fassung liefern.

Gemeinsame Bausteine

MJML hat mj-include, und das hat einen Haken, den Sie vor der Einführung kennen sollten: Includes werden stillschweigend ignoriert, solange Sie sie nicht aktivieren, und zwar mit ignoreIncludes: false in Node oder mit --config.allowIncludes true auf der Kommandozeile. Fehlt in der Ausgabe Ihr Header, ist das die erste Stelle zum Nachsehen. Das Gegenstück in Maizzle ist eine Vue-Komponente; der Migrationsleitfaden zeigt sie als kleine Header-Komponente im Body.

import mjml2html from 'mjml'

async function compile(source) {
  const { html, errors } = await mjml2html(source, { ignoreIncludes: false })
  return html
}

Das folgt dem asynchronen Aufruf von mjml2html und der Option ignoreIncludes aus der MJML-Dokumentation. Verwenden Ihre Includes relative Pfade, übergibt dieselbe Doku-Seite zusätzlich einen filePath, damit MJML weiß, von wo aus es auflösen soll.

Dev-Server und Prüfungen

Der Dev-Server von Maizzle bietet Live-Vorschau, Größenwechsel für verschiedene Geräte, Dark-Mode-Emulation und einen Reiter „Checks“. Die Prüfungen gibt es in zwei Arten: Kompatibilitätswarnungen aus den Daten von caniemail.com und Lint-Regeln, etwa für einen Button ohne href oder ein Bild ohne alt. Standardmäßig zielen sie auf Gmail, Apple Mail, Outlook und Yahoo!. Das Tooling von MJML ist schlanker: ein Watch-Modus in der CLI, eine Einstellung für die Validierungsstufe (strict, soft oder skip) und Editor-Plugins. Echte Client-Screenshots ersetzt keines von beiden, und die Kompatibilitätsseite von Maizzle sagt das selbst.

Outlook und andere schwierige Clients

Beide Frameworks kapseln die Tricks mit Tabellen und bedingten Kommentaren, sodass Sie sie nicht von Hand schreiben. Der Button von Maizzle hat Props wie msoPt, msoPb und msoPx für das Padding im klassischen Outlook sowie einen Schalter outlookFallback; dazu kommen die Komponenten Outlook, NotOutlook und OutlookBg (VML-Hintergrundbilder) für Fälle, in denen Sie diesen Client gezielt ansprechen müssen. Die Dokumentation von MJML nennt eine Grenze offener: mj-button ist in manchen Clients wegen eingeschränkter Unterstützung nicht vollständig anklickbar. Beide Ansätze sind in Ordnung; entscheidend ist, dass Sie in einer echten Outlook-Vorschau die Ecken des Buttons anklicken.

Wo das Projekt liegt

Maizzle kann ein eigenes Repository sein oder als Vite-Plugin in einer App laufen. Die Doku nennt Laravel, Nuxt, SvelteKit und Astro und beschreibt das Plugin so, dass es Maizzle in einem eigenen Dev-Server neben Ihrem startet und die E-Mails nach vite build kompiliert. MJML liegt außerhalb Ihres Builds: Sie rufen die CLI oder mjml2html dort auf, wo es Ihnen passt. Deshalb passt es auch in Rails-, Django- oder .NET-Umgebungen ganz ohne Frontend-Toolchain.

Das HTML zum Empfänger bringen

Kompilierte Ausgabe ist nur die halbe Aufgabe. Maizzle dokumentiert Deploy-Rezepte für Nodemailer, SendGrid, Mailgun, Postmark, Resend, AWS SES und Cloudflare. Das Rezept für Resend von der Deploy-Seite rendert ein Template und versendet es in wenigen Zeilen:

import { Resend } from 'resend'
import { render } from '@maizzle/framework'

const resend = new Resend(process.env.RESEND_API_KEY)
const { html, plaintext } = await render('emails/welcome.vue')

await resend.emails.send({
  from: 'hello@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome',
  html,
  text: plaintext,
})

Für einen Build-Schritt, den Sie vorab ausführen, sieht die programmatische Form so aus:

import { build } from '@maizzle/framework'

const { files } = await build({
  content: ['emails/**/*.vue'],
  output: { path: 'dist' },
})

Was der Stack neben zwei kostenlosen Frameworks kostet

Das Framework ist der günstige Teil. Zwei Posten auf der Rechnung zählen: Vorschauen und Versand. Auf seiner Preisseite führt Email on Acid den Tarif Basic mit 99 $ im Monat für 1.000 Vorschauen und Premium mit 199 $ für 2.000, Überschreitungen kosten 0,15 $ pro Vorschau. Jeder Client- oder Geräte-Screenshot zählt als eine Vorschau, ein Test über 50 Clients verbraucht also 50: Basic reicht für etwa 20 vollständige Durchläufe im Monat, Premium für etwa 40. Wenn Sie eine E-Mail vor dem Versand fünfmal neu bauen, ist das Kontingent schnell weg. Das spricht für das Framework mit der schnelleren Rückmeldung, egal welches Sie wählen.

Für den Versand nennt die Preisseite von Resend einen Free-Tarif für 0 $ mit 3.000 E-Mails im Monat (100 pro Tag) und Pro für 20 $ mit 50.000. Die Ausgabe beider Frameworks funktioniert damit, und die Doku von Maizzle zeigt genau, wie. Wenn Sie andere Versanddienste vergleichen möchten, stellen unsere Seiten Resend vs Postmark und Postmark vs SendGrid die Zahlen nebeneinander.

Maizzle ist die richtige Wahl, wenn …

• Design und Entwicklung bereits eine gemeinsame Tailwind-Konfiguration nutzen und E-Mail dieser folgen soll.
• Templates echte Logik brauchen: Sprachumschaltung, Zeilen aus Daten, optionale Blöcke.
• das Framework Sie vor nicht unterstützten CSS-Eigenschaften warnen soll, bevor Sie einen Vorschau-Dienst öffnen.
• die E-Mails neben einer Vite-App liegen (Laravel, Nuxt, SvelteKit, Astro) und Komponenten mit ihr teilen.

MJML ist die richtige Wahl, wenn …

• Ihr Backend nicht in JavaScript geschrieben ist oder mehrere Dienste dieselbe Quelle kompilieren müssen.
• Sie ein kurzes Vokabular bevorzugen, in dem Layout aus mj-section und mj-column besteht, und sich mit Tailwind gar nicht befassen wollen.
• eine Plattform, die Sie nutzen, MJML direkt entgegennimmt. Loops erlaubt zum Beispiel, eigenes MJML anstelle des eigenen Editors hochzuladen.
• auch Personen außerhalb der Frontend-Entwicklung die Templates lesen und prüfen sollen.

Vom einen zum anderen wechseln

Von MJML zu Maizzle ist die besser dokumentierte Richtung, denn Maizzle liefert die Zuordnungstabelle gleich mit. Bauen Sie zuerst eine unkritische E-Mail neu, etwa das Zurücksetzen eines Passworts, schicken Sie beide Fassungen durch dieselben Client-Vorschauen und vergleichen Sie die Screenshots. In die Gegenrichtung müssen Sie Vue-Logik zu Platzhaltern abflachen. Legen Sie deshalb vorab fest, wo die bedingten Blöcke danach liegen sollen. Weitere Paarungen finden Sie unter MJML vs React Email und React Email vs Maizzle; die CSS-Grenzen hinter alldem behandeln CSS in E-Mails und der Leitfaden zur Client-Kompatibilität.