PostsExperimenting with React Email Templates
Posted 02/28/2019

🏋 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

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
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.

Theme Box
Open Mic Night Atom
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