DEV Community

Avi Goldman for SparkPost

Posted on • Originally published at sparkpost.com on

Announcing HEML: An Open Source Framework for Email

Today I am excited to announce the first release of HEML, an open source markup language for crafting clean, responsive emails.

Why

If you’re not familiar with writing HTML emails, it can be a painful process. A few months ago I started to play with some exciting interactive developments on the front end. I found the bottleneck wasn’t sending or testing the email, but simply building the email itself. At our next company hackathon, I took the opportunity to solve this problem, and thus HEML was born.

Each element in HEML renders into email-ready HTML so that you can send without worry. HEML also works to iron out CSS bugs and limitations of different email clients. An excellent example of one such bug is an obscure issue in Lotus Notes where if you use RGB decimal value, the entire style declaration will be ignored. HEML will handle that bug for you.

Our Goals

We wanted HEML to help make email more accessible to developers. The idea is for developers to jump in quickly and build their emails without wrestling with Outlook (or any other email inbox). To do this, we focused on three things.

Native feel

We wanted HEML to look and feel like HTML. As a result, it mirrors HTML as closely as possible and uses plain ol’ CSS for styling.

Forward Thinking

HEML doesn’t limit you from taking advantage of all that HTML and CSS can do. It encourages progressive enhancements. Email doesn’t have to look the same everywhere.

Extendable

HEML lets you create your custom elements, share them, and pull in other elements made by the community.

Using HEML

There are a couple of different ways to use HEML.

Get started quickly using our editor at heml.io/editor.

To use it locally, install it with:

npm install -g heml

Create your HEML email in email.heml:


<heml>
  <head>
    <subject>Email Rox!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Hello world </h1></marquee>
    </container>
  </body>
</heml>

and run:

heml develop email.heml

That starts a development server that will auto-reload your browser whenever you make a change.

Once you’re ready to send your email into the wild, run:

heml build email.heml

This generates an email.html file that is ready to be sent.

Give it a spin!

This is our take on a difficult problem. It doesn’t solve every problem presented by email, but it can help you create solutions for your unique email challenges. There has been amazing work done to simplify this challenge by MJML,Foundation for Email, and many others. We hope you find this equally as helpful!

So give it a try! Hopefully, it makes your life easier. If you have any feedback, suggestions, or bugs, let us know.

Happy Coding!

The post Announcing HEML: An Open Source Framework for Email appeared first on SparkPost.

Top comments (8)

Collapse
 
xgenvn profile image
Brian Ng

I have got hand on Inky from Foundation, what are HEML differences?

Collapse
 
avigoldman profile image
Avi Goldman

There are definitely similarities between the two systems. The biggest difference in my mind is how you style elements. In foundation for email, you use their specific sass variables for styling the different elements. If there is a style that doesn't have a variable, you have to dig into the output itself and add your CSS. In HEML you write CSS, mirroring exactly what you'd expect when building out a website. I believe there is also more power in HEML. You can create your own elements to improve the CSS output and create new elements that the community can use!

In the end, if you have a system that works for you and you don't see any major advantages to switching, then stick with it!

Happy sending! 💌

Collapse
 
xgenvn profile image
Brian Ng

Thank you, I'll give HEML a try. Create a new element is a big deal ;).

Collapse
 
terceranexus6 profile image
Paula

I'm in love with this! thank you so much for bringing this up!

Collapse
 
ztickm profile image
Salim MAHBOUBI

I love this and all, but I wish you didn't use marquee. marquee brings bad memories. :D

Collapse
 
avigoldman profile image
Avi Goldman

haha, it's definitely used as more of a joke than anything else 😜 but it also shows that email does support some cool (and just a tad outdated) features! There is a lot we can do with email that we haven't touched yet!

Collapse
 
jmosouza profile image
João Souza

Extendable components aside, what's the difference from writing regular HTML and CSS?

Collapse
 
avigoldman profile image
Avi Goldman

I totally understand the confusion because what you write is basically HTML and CSS. That was the goal 😄

I think the best way to see the power of HEML is to take a look at the output from even a very basic email. The components compile into pretty ugly HTML and CSS. HEML remove the need to understand why each element is built in the way it is. On the CSS side, there is a fair amount of manipulation happening so that your CSS is safer to send. Like I mentioned in the article, the color is formatted to be safer. Thats one example. HEML will also change the font attribute to have better support.

Feel free to ask me any and all questions as an issue on the repo or tweet them at @theavigoldman