Wie das Rendering funktioniert

Templatical trennt die Template-Bearbeitung vom Template-Rendering. Der Editor erzeugt JSON; der Renderer wandelt dieses JSON in MJML um. Anschließend kompilieren Sie das MJML mit einer beliebigen MJML-Bibliothek zu HTML und versenden es über Ihren E-Mail-Dienst.

Die Pipeline

1. JSON -- Das native Format des Editors. Ein TemplateContent-Objekt mit einem blocks-Array und einem settings-Objekt. Speichern Sie es, damit Nutzer die Bearbeitung später fortsetzen können.

2. MJML -- Eine speziell für E-Mails entwickelte Zwischen-Markup-Sprache. Jeder Templatical-Block wird auf eine MJML-Komponente abgebildet (<mj-text>, <mj-image>, <mj-button> usw.). MJML übernimmt die schwierigen Teile von E-Mail-HTML: responsive Tabellen, Outlook-Conditionals und Kompatibilität mit verschiedenen E-Mail-Clients. Dies ist die Ausgabe des Templatical-Renderers.

3. HTML -- Die finale Ausgabe. MJML kompiliert zu einem vollständigen HTML-Dokument mit Inline-Styles, verschachtelten Tabellen und client-spezifischen Workarounds. Diesen Schritt kompilieren Sie selbst mit einer beliebigen MJML-Bibliothek:

   Sprache	Bibliothek
   Node.js	mjml (offiziell)
   PHP	spatie/mjml-php
   Python	mrml-python
   Ruby	mrml-ruby
   Rust	mrml
   .NET	Mjml.Net
   Elixir	mjml_nif

   Eine vollständige Liste finden Sie auf mjml.io/community.

Warum MJML?

MJML ist eine Open-Source-Markup-Sprache, die speziell für E-Mails entwickelt wurde. E-Mail-HTML ist bekanntermaßen schwierig. Jeder E-Mail-Client rendert HTML anders -- Outlook verwendet die Rendering-Engine von Microsoft Word, Gmail entfernt <style>-Tags, Apple Mail unterstützt modernes CSS, Yahoo dagegen nicht. HTML zu schreiben, das überall funktioniert, erfordert:

• Verschachtelte Tabellen für das Layout (Flexbox und Grid funktionieren nicht)
• Inline-Styles auf jedem Element (externe/eingebettete Stylesheets werden entfernt)
• Outlook-spezifische Conditional Comments (<!--[if mso]>)
• Responsive Breakpoints über <style>-Tags für Clients, die sie unterstützen

MJML abstrahiert all dies. Sie schreiben semantische Komponenten (<mj-section>, <mj-column>, <mj-text>), und MJML kompiliert sie zu kompatiblem HTML.

Indem Templatical MJML statt direkt HTML erzeugt, bleibt es leichtgewichtig und gibt Ihnen die volle Kontrolle über die finale Ausgabe. Sie können einen beliebigen MJML-Compiler in einer beliebigen Sprache verwenden und das MJML vor dem Kompilieren modifizieren – um eigene Komponenten einzufügen, Tracking-Pixel hinzuzufügen oder das Markup an die Anforderungen Ihrer Versandplattform anzupassen.

Was gespeichert werden sollte

Speichern Sie sowohl JSON als auch MJML in Ihrer Datenbank, wenn der Nutzer speichert. Das JSON ermöglicht es Nutzern, das Template erneut zu öffnen und zu bearbeiten. Das MJML ist das, was Sie zum Versandzeitpunkt zu HTML kompilieren. Das Beispiel im Schnellstart zeigt dieses Muster.

Was der Renderer tut

@templatical/renderer nimmt ein TemplateContent-JSON-Objekt entgegen und erzeugt ein vollständiges MJML-Dokument. Im Einzelnen:

• Konvertiert jeden Block im JSON-Baum in seine entsprechende MJML-Komponente (text → <mj-text>, image → <mj-image>, button → <mj-button> usw.)
• Wendet Blockstile (Padding, Margin, Hintergrundfarbe) als MJML-Attribute an
• Verarbeitet responsive Overrides für Tablet- und Mobile-Viewports
• Fügt benutzerdefinierte Schriftart-Deklarationen als <mj-font>-Tags ein
• Bewahrt Merge-Tags unverändert (sie werden als wörtlicher Text durchgereicht)
• Berücksichtigt visibility-Einstellungen -- auf allen Viewports ausgeblendete Blöcke werden ausgelassen
• Umschließt Blöcke mit displayCondition-Before/After-Strings
• Entfernt optional rohe HTML-Blöcke, wenn allowHtmlBlocks auf false gesetzt ist

Was der Renderer NICHT tut

• MJML zu HTML kompilieren -- Verwenden Sie dafür eine beliebige MJML-Bibliothek.
• Merge-Tags auswerten -- Tags wie {{ first_name }} werden unverändert durchgereicht und zum Versandzeitpunkt von Ihrer E-Mail-Plattform ersetzt.
• Anzeigebedingungen auswerten -- Bedingte Umschließung (z. B. {% if %}) wird zur Verarbeitung durch Ihre Versandplattform unverändert durchgereicht.
• E-Mails versenden -- Der Renderer erzeugt MJML. Der Versand wird von Ihrem E-Mail-Dienst übernommen.
• Bilder optimieren -- Bilder werden per URL referenziert. Der Renderer lädt, skaliert oder optimiert sie nicht.

Nächste Schritte

• Renderer-API -- vollständige renderToMjml()-Referenz