Experimenting with React Email Templates
Publish Date2019-02-28

🏋 Motivation

In some recent posts, I outlined a some different ideas I have been experimenting with and thinking about:

This post describes a some code experimentation I did to synthesize elements of the content of the posts listed above.

🏝 Goals

The Primary Goal

My primary goal was to just send a pretty standard email with an event reminder. Very similar to the one described in Experiment: Email Subject Lines (With Nilsen Strandskov).

Secondary Goals

I have some requirements for email in my system:

  • Emails must work in most clients, or degrade nicely
  • Emails should adhere to the principles outlined in Atomic Design system
  • Email code should be as close and similar as possible to application code. This promotes reuse of critical elements (theming etc.), as well as opens the potential for future automation
  • Email code should be as simple as possible
  • Email should be visible and accessible to engineering, design, and product

These requirements are not currently satisfied. I wanted to apply the lessons learned from previous experiments to satisfy some of those requirements.

⏏ Ejecting From MailChimp Campaign Builder

2019 02 28 mailchimp editor
My old Template in the Mailchimp Editor

I have a template that I built within the MailChimp email editor, which I have used / refined for several years. Designing a new template seemed counter productive. Instead, I chose to rewrite the template in the RichSoni.com Storybook which could satisfy my secondary goals for this experiment:

  • Emails must work in most clients, or degrade nicely
  • Emails should adhere to the principles outlined in Atomic Design system
  • Email code should be as close and similar as possible to application code. This promotes reuse of critical elements (theming etc.), as well as opens the potential for future automation
  • Email code should be as simple as possible
  • Email should be visible and accessible to engineering, design, and product
2019 02 28 openmic email
My new Template in the RichSoni.com Storybook

⚗ Atomizing

Atomic Design is a mental model for thinking about UI components. The premise is generally common sense for a developer, but is revolutionary when leveraged as a tool for communicating with a team and stakeholders. Storybook is just one tool that can be used to implement Atomic Design principles.

2019 02 28 theme box
Theme Box
2019 02 28 open mic
Open Mic Night Atom
2019 02 28 header
Header Atom

Outlook Compatibility

I also put some effort into making my email more resilient to email client compatibility quirks.

After doing this research, I wondered if there was tooling to make this easier.

I settled on giving react-html-email a shot.

react-html-email

react-html-email provides some really neat features:

  • renderEmail(emailComponent): Render an email component to an HTML string. Adds an XHTML 1.0 Strict doctype, as per HTML Email Boilerplate
  • configStyleValidator(config): By default, inline styles passed to the style prop will be validated against Campaign Monitor's CSS Support Guide
  • Support for mailchimp mc HTML attributes

Using in Storybook

At this moment, I am only really leveraging one component from this library: renderEmail.

I wired renderEmail to a prop on my own Email component. This prop can be controlled by a Storybook Knob to reveal the source for the email.

🏁 Conclusions

This was experiment merely opens the door for lots of really interesting ideas in the future. Here are some I would like to try:

  • Automatically creating emails for upcoming events
  • Fully leverage react-html-email, and possibly even contribute some new features to that project