Write Beautiful Emails in React
Overview
When we were creating email templates with Luma, we consistently ran into two issues:
Email has weird CSS. We can't use the same CSS that you use in the browser because email clients support only a weird subset of CSS rules. We need some way of creating a button component that actually looks like a button.
We want to use React. React allows us to reuse components across emails, embed logic into the views, and render email previews in the browser.
Unfortunately, we couldn't find an existing solution that satisfactorily fixed these two issues.
Email providers like Postmark, Sendgrid, and Mailjet give you some tools to create email templates but they are hard to embed logic into and these proprietary templates will lock you into one email provider.
The React ecosystem has a few packages for creating emails in React, but none of these packages are popular and they don't give you built in components that handle email CSS.
Our Solution
To solve the two issues, we built a system that allows us to couple React with MJML which is an open source email template language built by Mailjet. MJML gives you components like mj-button which gives you a reasonable looking button by creating nested <table />s.
We built a library @luma-team/mjml-react which gives you React components that wrap the MJML templating language. So you can just write <MjmlButton /> and you'll get a reasonable looking button.
Moving our templating logic to React has also allowed us to reuse logic across templates, easily deploy new templates, and gives us freedom to switch email providers in the future.
Preview Emails in the Browser
We made sure that we can preview these email templates in the browser. This makes it easy to iterate on email templates and lets us build a template gallery that anyone on the team can look through.
You can see our email template library here: lu.ma/style-guide/email
Example Repo
If you want to build emails like we do, I've set up an example repo that shows how you can use MJML to build templates, preview them in the browser, and then send them with Postmark.
You can play with it and even send some test emails 😍.
Preview: https://email-templates-starter-repo.luma-dev.com/
GitHub: https://github.com/luma-team/email-templates-starter-repo
P.S. If you think creating clean solutions to common engineering problems is fun, you should join us at Luma!