How we built our HTML email editor using liquid, wysihtml5 and premailer

Managing email design and content is extremely important to our customers. From day one, we wanted to give our customers full control over the look and feel of their email. Here are our first iterations of email editing in Customer.io.

The naive approach

We started with a big old text box using Ace editor for syntax highlighting. Here, you could paste raw HTML for a single email.

Old Editor

We started dogfooding the editor to manage our transactional, triggered and drip HTML emails that we send to customers. We realized that a single text box combining form and content was not a great experience for creating and editing emails. The styles (form) were not reusable, and it was hard to find the actual content. We had an idea, inspired by Jekyll.

We love the static-site generator Jekyll. We’ve used it since day 1 to power all of our public content including our homepage and this blog. Two of our favorite things about Jekyll are the use of Liquid tags and Templates.

Separating Content from Form

We were already merging content into emails using Liquid e.g.: {{ customer.firstname }}. We decided to take it a step further and use this technique to separate the email body from the template.

The first step is two html text boxes. One contains your template. The other, your content. The content gets merged into the template where a {{ content }} tag exists.

Our email template

This makes it easy to separate concerns. A designer / developer can worry about the email template, and someone else can worry about content. You can even quickly customize a mailchimp or campaign monitor template and drop in a {{ content }} tag. (That’s how we built our template).

Making it easy for everyone to write emails

So, now we have some separation. The content is separated from the template. But we learned that the people who are most likely to be editing the content are less-technical.

After looking at another option, we implemented a slick WYSIWYG editor, WYSIHTML5. One of our concerns with any WYSIWYG editor is the quality of the code that gets generated. WYSIHTML5 passed our tests with flying colors.

Our wysiwyg editor

What’s great about this is we’ve limited what’s available in the WYSIWYG portion of the editor. When users add content, they don’t want to worry about HTML or CSS styles. They want to write and add things like bold and headings. The theme takes care of the rest. But, if they’re sophisticated and want to drop in a table to align an image to the right, they can do that in HTML mode too.

Putting it all together

We’ve got a template with styles defined, and content with standard html tags. In a browser this looks great, but in email there’s one more step:

inline the styles

This means taking everything that’s pretty in CSS and uglifying it by adding things like style="padding-bottom: 12px" to tags in your email. We parse the email through Premailer. This moves all the styles inline and helps us make sure the email hits the inbox looking as pretty as it does on the site.

A delivered email

We think we arrived at a pretty neat solution to two perpetually annoying problems: WYSIWYG editors and HTML formatted emails.

Want to talk about it? Discuss on Hacker News