Introducing Crepe

Building emails with React sounds a bit crazy at the surface level. Email clients don't support Javascript, so right off-the-bat it seems like a non-starter.

But here we are, and I'm blogging about a React toolchain I just shared on Github: https://github.com/iammatthias/crepe

I'm calling it the Create-React-Email-Production-Enviroment, or Crepe, for short.

This started as a personal challenge. I wanted to streamline the process of building dynamic email templates, with a focus on composability and reusability. Sane defaults with prop overrides was compelling, and the ability to pre-define resuable content (like color values or logo assets) was a boon.

Why not just use MJML?

That's an excellent question. Why re-invent the wheel? Markup tools like MJML tend to procude a LOT of spaghetti code. It can actually be a bit problematic—a complex email layout can easily baloon to a point where the clients clip the content.

Caveats

This is currently pretty opinionated, and needs some stringent polish around things like accessibility. But, the components that are published have been render tested and have sane fallbacks when nessecary. It has a long way to go before it can compete with the like of Cereberus (Ted Goas seriously knows his stuff), but I'm hopeful that this little side project can grow into something special.

Proper documentation is underway for the various components that are available, but for the meantime you can get started using the following:

1. git clone https://github.com/iammatthias/crepe crepe
2. yarn && yarn install
3. yarn start

This will install the dependencies and launch a live preview of Crepe in your browser.

yarn build will transpile the email with Babel, and isn't really nessecary. It's a step included in the yarn compile command which handels transpiling the React code before compiling it to a file in the root directory called build.html. You can copy that code and drop it into the ESP of your choice. Don't forget to configure your unsub url!

Credits

Many thanks to Lang.Ai for their React-Emails library, which helped me bootstrap this project initially. While my components and defaults are fairly different, their initial structure was a huge help.

Photo by Thomas Tastet on Unsplash

Discuss on Twitter
Next →
  • © 2019 Matthias Jordan. All rights reserved.
    Made with ♡ in California, USA
  • Powered by Contentful