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)
I have got hand on Inky from Foundation, what are HEML differences?
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! 💌
Thank you, I'll give HEML a try. Create a new element is a big deal ;).
I'm in love with this! thank you so much for bringing this up!
I love this and all, but I wish you didn't use marquee. marquee brings bad memories. :D
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!
Extendable components aside, what's the difference from writing regular HTML and CSS?
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
fontattribute to have better support.Feel free to ask me any and all questions as an issue on the repo or tweet them at @theavigoldman