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.