React Email Editor
MIT-lizenzierte React-Komponente, die Unlayers Drag-and-drop-E-Mail-Builder in Ihr eigenes Produkt einbettet
React Email Editor ist eine React-Komponente, die einen Drag-and-drop-E-Mail-Builder in Ihre eigene Anwendung setzt, damit Ihre Nutzerinnen und Nutzer ihre E-Mails selbst gestalten können, ohne dass Sie einen Editor bauen müssen. Die Komponente ist MIT-lizenziert, installiert sich in einer Zeile aus npm und hat im August 2026 5.206 GitHub-Sterne — der Editor, den sie darstellt, ist allerdings Unlayers gehostetes Produkt, und genau diese Unterscheidung verdeckt das Lizenz-Abzeichen. Sie entscheidet, wie schnell Sie E-Mail-Vorlagen ausliefern können; über das Geöffnetwerden dieser E-Mails entscheidet sie nichts.
Was es genau ist
React Email Editor (github.com/unlayer/react-email-editor) ist der offizielle React-Wrapper für Unlayers visuellen E-Mail-Builder. Sie rendern eine einzige Editor-Komponente, halten eine Referenz darauf und arbeiten mit den drei Methoden, die das README dokumentiert: loadDesign holt eine gespeicherte Vorlage zurück auf den Bildschirm, saveDesign übergibt das Design als JSON, und exportHtml liefert responsives HTML zusammen mit ebendiesem JSON. Ihre Datenbank speichert das JSON, damit später weiterbearbeitet werden kann, und das HTML, damit Ihre Versandstrecke etwas zum Ausliefern hat. Das Repository läuft seit 2017 und wird mit Luft nach oben gepflegt: v2.1.2 erschien am 11. August 2026, und dahinter stand echte Reparaturarbeit statt Kosmetik — ein Hydration-Fehler beim serverseitigen Rendern und ein altes Leck, bei dem Editoren beim Unmount nie zerstört wurden.
Version 2 ist ein Modernisierungs-Release, und die eigenen Umstiegshinweise sind ungewöhnlich offen darüber, was sich geändert hat: React 16.8 und Node 18 sind jetzt die Untergrenze, tiefe Importe ins Paketinnere sind über eine Exports-Map gesperrt, und der veröffentlichte Code ist ES2019 — wer eine alte Toolchain hat, die das nicht parsen kann, soll auf der 1.x-Linie bleiben. Das Bundle trägt die Direktive "use client", sodass sich die Komponente im App Router von Next.js direkt aus einer Client-Komponente importieren lässt, ohne den üblichen Umweg über einen dynamischen Import. Die Ausgabe wird gegen Gmail, Apple Mail, Outlook und Yahoo Mail geprüft — die vier Clients, an denen handgeschriebenes E-Mail-HTML am häufigsten zerbricht.
Offene Komponente, gehosteter Editor — die Lizenzzeile zweimal lesen
Das Repository ist MIT, und das README sagt es unmissverständlich. MIT deckt aber die React-Komponente ab, nicht den Editor, den sie lädt. Diese Form ist in Entwicklerwerkzeugen verbreitet und lohnt eine bewusste Betrachtung, denn "Open Source" auf dem Abzeichen und "Open Source" in Ihrem Risikoregister beantworten verschiedene Fragen. Hier liegt was wo.
| Was Sie bekommen | Wo es liegt | Was das für Sie bedeutet |
|---|---|---|
| Die React-Komponente | Ihr Repository, über npm, unter MIT | Ihres zum Forken, Patchen und Festpinnen. Nichts davon kann Ihnen genommen werden. |
| Die Editor-Oberfläche, die Werkzeuge und der KI-Assistent | Unlayers Dienst, zur Laufzeit geladen und über die Optionen der Komponente konfiguriert | Ob Ihre Nutzerinnen und Nutzer bearbeiten können, hängt von der Verfügbarkeit eines Dritten ab, und der Funktionsumfang folgt der Roadmap dieses Anbieters, nicht Ihrem Repository. |
| Das exportierte HTML und das Design-JSON | Ihre Datenbank | Der mitnehmbare Teil. Bereits erstellte Vorlagen bleiben Ihre, auch wenn Sie später den Editor wechseln. |
| Die Übersetzungen der Editor-Oberfläche | Ein separates Unlayer-Repository, das Pull Requests annimmt | Sie können eine Sprache beisteuern, aber Sie steuern sie stromaufwärts bei und liefern sie nicht lokal aus. |
Wo ein E-Mail-Builder im Wachstums-Stack einer Gründerin hingehört
Die Frage, die vor jeder Installation zu klären ist: Wessen E-Mails sind das? Wenn Ihre Nutzerinnen und Nutzer im Produkt E-Mails verfassen und versenden — ein CRM, ein Newsletter-Werkzeug, ein Buchungssystem, dessen Bestätigungen jemand im eigenen Auftritt haben will —, dann ist ein eingebetteter Builder kaum vermeidbar, und ein eigener kostet Monate Arbeit, die nichts damit zu tun haben, warum das Produkt gekauft wurde. Geht es nur um Ihre eigene Transaktions- und Lifecycle-Post, brauchen Sie überhaupt keinen visuellen Editor: in Code geschriebene Vorlagen wie React Email machen weniger Arbeit und lassen sich weit besser versionieren.
- Es löst die Produktion, nicht die Verteilung Ein Builder macht E-Mails schneller erstellbar. Er hat keine Meinung dazu, wer sie empfängt, ob die Adresse zustellbar ist oder ob die Nachricht das Senden wert war.
- Es nimmt eine Warteschlange von Ihrem Schreibtisch Der eigentliche Gewinn, wenn Ihre Nutzerinnen und Nutzer die Verfassenden sind: Vorlagenwünsche kommen nicht mehr als Entwicklungstickets an. Das ist ein Argument über Supportlast, nicht über Wachstum, und es ist völlig in Ordnung, es zu diesen Bedingungen zu kaufen.
- Es entscheidet nicht über Öffnungsraten Das Layout ist der einzige Teil der E-Mail-Wirkung, der weitgehend gelöst ist. Betreff, Zeitpunkt, Listenqualität und Reputation sind es nicht — und keines davon taucht in einem Editor auf.
- Es fügt eine Laufzeitabhängigkeit hinzu Ein eingebetteter gehosteter Editor ist ein Dritter im kritischen Pfad Ihres Produkts. Bewusst akzeptierbar, aber prüfen Sie, ob gespeicherte Designs noch zu öffnen sind, falls Sie eines Tages nicht mehr dafür zahlen.
Unsere eigene Erfahrung mit E-Mail bei AgentCeres — dem KI-Wachstumsleiter, unter agentceres.com — zeigt in dieselbe Richtung, und die beiden Dinge, auf die es ankam, waren weder Layout noch Werkzeug. Das erste war Subtraktion: Wer sich anmeldete und ein paar Minuten im Produkt blieb, konnte innerhalb von etwa fünf Minuten drei nahezu identische Nachrichten erhalten, sobald die automatische erste Recherche zusätzlich zur Begrüßung und zum Testhinweis eintraf. Wir haben eine E-Mail gelöscht, statt eine bessere zu gestalten. Die Produktion war nie die Grenze; die Zurückhaltung war es. Das zweite war die Sprache. Jede automatische Nachricht, die wir versenden, trägt von Hand geschriebene Fassungen für die Märkte, die wir bedienen, statt maschineller Übersetzung, weil sich der maschinelle Durchgang exakt wie ein maschineller Durchgang las — und das ist genau die Arbeit, bei der kein noch so guter Drag-and-drop-Editor geholfen hätte. Wählen Sie den Builder danach, wessen Hände darauf liegen, und stecken Sie die gesparte Zeit in Lifecycle-E-Mails, die man gerne bekommt.
FAQ
- Ist React Email Editor kostenlos?
- Die React-Komponente im Repository ist MIT-lizenziert und frei nutzbar. Der eingebettete Editor ist Unlayers eigenes Produkt, seine Bedingungen und etwaige Grenzen setzt also Unlayer, und sie sind von der Repository-Lizenz getrennt. Lesen Sie beides, bevor Sie darauf eine kostenpflichtige Funktion aufbauen.
- Worin unterscheidet es sich von React Email?
- React Email ist für E-Mails, die Sie schreiben: Komponenten in Ihrem Code, zu HTML kompiliert, im Pull Request geprüft. React Email Editor ist für E-Mails, die Ihre Nutzerinnen und Nutzer schreiben: eine visuelle Fläche in Ihrem Produkt, die HTML und ein Design-JSON zurückgibt. Verschiedene Zielgruppen — die meisten Produkte brauchen nur eines von beiden.
- Funktioniert es mit dem App Router von Next.js?
- Ja. Laut README enthält das veröffentlichte Bundle die Direktive "use client", sodass es sich ohne Umweg über einen dynamischen Import direkt aus einer Client-Komponente importieren lässt. Der Editor rendert weiterhin ins DOM und bleibt damit naturgemäß clientseitig.
- Versendet es die E-Mail?
- Nein, und diese Grenze sollte klar bleiben. Es erzeugt HTML und ein Design-JSON. Zustellung, Listenpflege, Sperrlisten und Absenderreputation gehören zu einer Versandinfrastruktur — einer selbst gehosteten Lösung wie listmonk oder einer E-Mail-API —, und diese Teile entscheiden darüber, ob die Nachricht überhaupt in einem Postfach ankommt.
- Was bricht beim Umstieg von Version 1?
- Die Komponenten-API bleibt unverändert, die meisten Anwendungen steigen also um, ohne Code anzufassen. Bewegt haben sich die Anforderungen: React 16.8 und Node 18 als Minimum, tiefe Importe ins Paketinnere sind gesperrt, und der ausgelieferte Code ist ES2019. Version 2 zerstört außerdem Editoren beim Unmount — das behebt ein Leck, ist aber eine Verhaltensänderung, die man kennen sollte, wenn etwas in Ihrer Anwendung vom alten Lebenszyklus abhing.
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.