React Email 6.0

Was ist React Email 6.0?

React Email 6.0 ist ein Open-Source-Update für React Email und bietet einen visuellen E-Mail-Editor, den du in deine eigene Anwendung einbetten kannst. Es enthält zudem eine neue Sammlung von Templates und ein einheitliches Paket zum Importieren von React Email Components.

Der Kernzweck von React Email 6 ist es, Teams dabei zu helfen, E-Mail-Layouts zu erstellen und e-mail-fähige Ausgabe (inklusive HTML) aus einem React-basierten Workflow zu generieren – bei gleichzeitig erweiterbarer und anpassbarer Editor-Funktionalität.

Wichtige Funktionen

• Open-Source-visueller Editor (eigenständiges Paket): Installiere den Editor als @react-email/editor und bette ihn mit EmailEditor in deine App ein.
• Einbetten in deine Anwendung: Render den Editor direkt in React mit einem minimalen Component-Beispiel (return <EmailEditor />).
• Editor-Architektur mit Core + Extensions: Der Editor ist in einen integrierten Core und eine Extension-Schicht aufgeteilt, sodass benutzerdefinierte Blöcke/Features ohne Änderung des Cores hinzugefügt werden können.
• Komponierbare Node-API (EmailNode) für Custom Blocks: Definiere neue Editor-Blöcke, indem du angibst, wie der Block zu HTML abgebildet wird und wie er zu React Email Output gerendert wird.
• Theme-Unterstützung: Lade das Standard-Theme-CSS (@react-email/editor/themes/default.css) oder erstelle ein eigenes Theme, das zum Styling deiner App passt.
• Neue Template-Sammlung: Enthält Templates für gängige Anwendungsfälle (Authentifizierungsflows und E-Commerce-Sequenzen) als React Email Templates und als Figma-Dateien.
• Einheitliches React Email Components Paket: Importiere Components aus react-email als einziges Paket (der Editor muss separat installiert werden).

So nutzt du React Email 6.0

1. Pakete installieren oder aktualisieren gemäß den Anweisungen im Upgrade-Bereich, falls du von React Email 5.0 migrierst.
2. Editor separat installieren (der Editor ist nicht im einheitlichen react-email-Paket enthalten):
   • npm i @react-email/editor
3. Editor in deine React-App einbetten:
   • Importiere EmailEditor aus @react-email/editor und rendere es in einem Component.
4. Editor optional stylen:
   • Importiere das Standard-Theme-CSS (@react-email/editor/themes/default.css) oder wende dein eigenes Theme an.
5. Editor anpassen (optional):
   • Nutze die komponierbare API (EmailNode), um Custom Blocks zu definieren, die sowohl HTML-Parsing (parseHTML) als auch Output-Generierung (renderToReactEmail) umfassen.
6. Mit Templates starten:
   • Nutze die bereitgestellten Templates als Basis oder ziehe einzelne Abschnitte in deine eigenen React Email Templates.

Anwendungsfälle

• E-Mail-Composer in eine Web-App einbetten: Füge einen visuellen Editor zu einem Dashboard hinzu, damit Nutzer E-Mail-Inhalte direkt in deinem Produkt erstellen können.
• Custom Content Blocks für spezifische Workflows erstellen: Erstelle Blöcke wie Callouts, Media-Uploads, eingebettete Social Posts oder Inline-Charts, indem du einen EmailNode definierst.
• Templates für gängige E-Mail-Typen standardisieren: Nutze die neuen Authentifizierungs- und E-Commerce-Templates, um Zeit beim Erstellen initialer Layouts zu sparen.
• Editor mit bestehendem UI-Styling integrieren: Importiere das Standard-Theme für einen schnellen Start, dann erstelle ein Custom Theme, damit der Editor zu deiner App passt.
• Wartbare E-Mail-Component-Bibliothek entwickeln: Importiere gängige Layout- und UI-Components aus dem einheitlichen react-email-Paket, während der Editor separat installiert bleibt.

FAQ

• Ist der Editor im einheitlichen react-email-Paket enthalten?
  Nein. Der Editor wird separat als @react-email/editor installiert.

• Kann ich den Editor direkt in meine React-App einbetten?
  Ja. Die Dokumentation zeigt, wie man EmailEditor importiert und in einem Component rendert.

• Wie füge ich Custom Blocks zum Editor hinzu?
  Nutze die komponierbare API über EmailNode, um das HTML-Parsing (parseHTML) und den React Email Render-Output (renderToReactEmail) eines Blocks zu definieren.

• Wo finde ich die neuen Templates?
  Die Templates sind als React Email Templates und als Figma-Dateien verfügbar, inklusive Authentifizierungs- und E-Commerce-Templates.

• Was ist beim Upgrade von React Email 5.0 auf 6.0 anders?
  Die Upgrade-Schritte entfernen @react-email/components und @react-email/preview-server, installieren react-email@latest und @react-email/ui@latest und aktualisieren Imports auf react-email statt @react-email/components.

Alternativen

• Generische E-Mail-HTML-Editoren/Builder (non-React): Nützlich, wenn du nur eine Editor-UI brauchst und keinen React-basierten Component-Workflow möchtest, aber du verlierst das React Email Integrationsmodell.
• Template-first React E-Mail-Bibliotheken: Wenn du keinen visuellen Editor in deiner App einbetten musst, kannst du auf React Components/Templates ohne Editor-Erweiterbarkeit setzen.
• WYSIWYG-Editoren mit HTML-Export: Diese erzeugen E-Mail-HTML-Output, bieten aber möglicherweise nicht denselben komponierbaren Node-Ansatz für das Einbetten editorspezifischer Custom Blocks in einen React Email Workflow.
• Design-Tools mit manueller Konvertierung zu E-Mail-Markup: Figma-first-Teams können Layouts in Figma erstellen und manuell in E-Mail-Code umsetzen; das unterscheidet sich vom direkten Einsatz von React Email Templates und vom Generieren von e-mail-fähigem Output über den Editor-Workflow.