Video Tutorial: How to Build Interactive Emails with HEML

Steve Tuck
Mar. 2, 2018 by Steve Tuck

HEML is an open source markup language for building responsive email that displays well across many different client devices. Anyone who’s tried to code responsive HTML for email knows what a tedious process that is.

That’s where HEML comes in. You just focus on creating simple markup. HEML renders it into responsive HTML that handles the quirks, bugs, and limitations of different email clients.

Compared to working in raw HTML, or even working in some drag and drop editors, HEML enables you to work at a higher conceptual level and be more productive. Yet if you have experience working with HTML, HEML will feel very familiar.

That simplicity is one of the reasons that HEML’s been making a great impression in the email and developer community. It has over 3500 stars on GitHub at the time of writing.

For the past couple months, I’ve been using HEML in several of my own projects. It’s really fun to use.

But as they say, it’s better to show than to tell—so I recorded a quick video walk-through of how to build a HEML email from scratch in just a few minutes. And as a bonus, I’ll show you how to turn the HEML output into a SparkPost template.

To recap, in this video, we:

  • Created a nice looking email newsletter in about 100 lines
  • Controlled layouts including images and side-by-side text blocks
  • Put in a fancy footer with a background image
  • Sent the mail and checked it looked good on Gmail
  • Learned some basics of working with HEML

It’s really that easy. If you’d like to look under the hood (err, bonnet), I posted a copy of the template I created in this video to GitHub.

I hope this video walkthrough has been helpful. Let me know what you think on Twitter—or leave comments on the video itself!


P.S. Want to learn more about HEML? Avi Goldman, HEML’s creator, recently shared the how and why of the HEML open-source project.


Related Content

Announcing HEML: An Open Source Framework for Email

HEML makes building emails as easy as building websites. We walk through why we’ve decided to launch this exciting open source project.

read more

4 Great Use Cases for Interactive Emails

We’ve gathered four great use cases that highlight how an interactive email can bring more web-like functionality into an email message.

read more

Creating the Next Generation of Interactive Emails with Rebel Mail

Meet our partner, RebelMail! Today they're demonstrating how to use their interactive email API to keep customers engaged with the inbox.

read more

Get started and start sending

Try SparkPost and see how easy it is to deliver your app’s email on time and to the inbox.

Try Now

Send this to a friend