As of now, there are no unified rules for email rendering in email clients. In addition, we have to consider how to display emails on different types of screens and devices. It’s no wonder we’re getting more and more tools for responsive email building. In this situation, it is easy to get confused choosing the right type of tool you need, as well as about which exact email builder to go for. At first, we were totally bewildered by the list of email builders, editors, generators, boilerplates, templates, etc. available online. Then we researched the available options to determine the best for building beautiful emails, focusing on the types of tools available, and mostly drag and drop email editors. When it came to more advanced email development options, we faced another question: how to choose a responsive email framework. In most reviews and comparisons, you get a solid list of tools where email frameworks, patterns, and templates are mixed up together. Let’s review the most mentioned options, sort them all out, and check their popularity on GitHub.
What is it?
Responsive email framework with custom tags is a specialized markup language. In most cases, it is an engine built with the JavaScript library.
When do you need it?
You need such an email framework when you have to implement multiple custom email templates with your team, have a certain level of coding skills but can’t / don’t want to bother with HTML/CSS, or would like to automate your workflow.
What are the most popular options?
We used the number of GitHub stars (as of August 2019) to determine popularity.
MJML
MJML by Mailjet has 9.1k GitHub stars. MJML stands for Mailjet Markup Language, so you as a user work with its custom components and tags. Then MJML transpiles them into a responsive HTML.
At first glance, we liked its user-friendly website, which features several examples and templates you can check out and try on the go. It is also well documented, which is emphasized by many framework users.
You can start using it online (with its online editor) as well as offline (download the engine as a binary file and install locally with npm).
Main features:
- component-based, with semantic syntax: for example, mj-button, mj-head, etc, or your own custom ones
- 20+ online templates and the capability to submit your own custom template
- online editor with a live preview and beautify MJML option
- its own ecosystem of plugins, like linter or Gulp
- ability to use it as a JSON object
- exporting results to the HTML file or sending emails right away with Nodemailer or Mailjet.
In general, all email creation tools offer great compatibility with major email clients, even the capricious Outlook. MJML is not an exception, but it also offers detailed tables for support of each component in 13 email clients.
Foundation for Emails 2 by Zurb (formerly Ink)
Foundation for Emails is next on our list with 7.1k GitHub stars.
This framework has its own component-based language called “Inky” (the name of the first version of the framework). It can be used with plain CSS or Sass (Node.js required). There is also a Ruby gem.
Exhaustive documentation and video tutorials make learning Foundation for Emails quick and easy.
Main features include:
- a templating language (Inky) that converts simple HTML tags into the complex table HTML required for emails
- a collection of reusable code and design patterns to be used with plain CSS or Sass
- a web inliner for CSS along with the build of Sass
- 11 customizable responsive HTML templates.
It asserts general compatibility with 30+ versions of popular email clients.
Foundation for Emails doesn’t have its own online editor, but you can try Slinky, an experimental tool by Zurb, which allows you to edit Inky online via CodePen.
HEML
HEML by SparkPost closes our list of custom tag frameworks, with 4.1k stars on GitHub.
It is an XML-based markup language, which is an npm module you install and use in Node.js.
You will easily find examples and guides on how to use it on both the website and on GitHub.
Main features:
- HEML elements and syntax similar to HTML/CSS
- customizable elements and style rules
- an online editor which shows the size of your email right away.
Responsive HTML or CSS email frameworks
What is it?
HTML/CSS email frameworks include a set of pre-built components and use pure HTML/CSS for building emails. They are usually also implemented as a Node.js build system.
When do you need it?
The use cases are the same as with frameworks that use custom tags. The only difference is that here you use traditional HTML /CSS instead of a new type of markup.
What are the most popular options?
Here we also referred to the number of stars on GitHub (as of August 2019).
Email Framework
According to our metrics, Email Framework is the winner in this category, with 1.3k stars on GitHub. It is an HTML email framework with pre-built grid options and basic components.
To begin, you download a set of HTML files or check them on GitHub. Email Framework doesn’t have any special features.You just start with the boilerplate and then use the grids, components, and snippets.
The Email Framework is said to be supported on 60+ email clients, but you won’t find the full list in their documentation.
Bojler
Bojler is a CSS/Sass email framework written with Sass. It has 786 stars on GitHub.
Begin by installing it. You will need Node.js and npm. Clear documentation with demos will guide you through the whole process, from installation to the best practices of composing and sending your emails.
Main features:
- automated Sass to CSS transpiler, CSS inlining, and Sass lintering
- typography, grid system, utility classes, and components
- a web server with live reload.
Bojler supports various versions of Outlook, Gmail, Yahoo Mail, Android, and iPhone email clients.
Maizzle
Maizzle is another HTML framework with 258 stars on GitHub. It uses the Tailwind CSS framework and gives you the freedom of writing of your own HTML and styling it with Tailwind’s utility classes.
To get started, you should download it and set it up with JavaScript config files.
Main features:
- Nunjucks templating language by Mozilla
- GitHub Flavored Markdown support
- transformers to beautify or inline your code
- default layout, adjusted for AMP for Email’s requirements
- Jigsaw version.
Outline Mail
Outline Mail is an HTML framework with 185 stars on GitHub.
To get started, you can install it with Bower or clone the Git repository. Node.js is required to use Outline Mail.
The framework provides five email examples and a set of responsive components. It is compatible with Gulp and has its tasks included, to automate your HTML email building workflow.
Pine
Pine by the Mountain is a less popular HTML framework with 84 stars on GitHub.
Pine uses HTML5 doctype and proposes you to start with a boilerplate. It already contains necessary CSS, tags, and attributes.
Main features:
- layout structure in includes wrappers, containers, and columns
- 12 column grid
- interactive components like accordion, pricing table, testimonials, etc.
- Outlook background image support
- retina image support.
Acorn
The Mountain, Acorn’s creators, call it a light(er) alternative to Pine. It holds just 46 stars on GitHub. Acorn uses HTML5 doctype as well but offers a standard 600px wide grid.
Main features:
- 600px wide, 4 column grid
- responsive utilities, content, and interactive components
- modern system font stack
- Outlook & Windows Mail retina background image support.
Other tools for composing HTML emails
There is a list of quite popular projects, which are often referred to as frameworks, but in fact they are not. They are HTML patterns, templates, and boilerplates. They are created to provide you with tools, approaches, and attributes to building responsive HTML emails. So, if you really like working on your own, creating your templates from scratch, and feel quite professional with HTML, this might be a great option for you.
There are three most popular options of such types on GitHub. Each of them has around 3.5k stars.
Cerberus
Cerberus is a suite of responsive HTML patterns and templates that you can use to create your emails. What’s interesting about Cerberus, is that it is not recommended to use with inliners. Each template has necessary comments for it and is tested amongst popular email clients.
Antwort
As a set of responsive layouts, Antwort’s mission is to teach you how to build HTML emails. So, it includes source pre-lined HTML, which is supposed to be an example of good HTML email code.
Email Boilerplate
Email Boilerplate also should be used as a guideline to the creation of HTML email design. It gives you several code snippets with instructions for using them.
Kilogram
509 GitHub stars for a setup of styles, Nunjucks templating engine by Mozilla, and extra tools for responsive email development. You get email templates, CSS inliner, and HTML minifier as well.
Gleemail
Gleemail, with 302 stars on GitHub, stays closer to a framework than HTML templates. Its authors name it a local development environment.
Gleemail allows you to:
- build email templates with Mustache
- write CSS using Stylus and have it inlined automatically
- export templates to other templating engines (MailChimp, Eloqua, FreeMarker, etc.)
- check email previews in your browser.
Email Lab
Email Lab is another interesting option worth mentioning here. This a project for developing and testing email templates. Currently, it holds 280 stars on GitHub.
With Email Lab, you get a standard boilerplate HTML markup, CSS or Sass styling, and reusable components.
It uses Grunt for workflow automation, which is why it is bigger than a template. Also, it has Ruby gem dependencies and requires Node.js.
Now, when you have an understanding of the types of tools and their capabilities, you can quickly decide on one (or several).
Whether you prefer to learn a new but easy and custom markup, use good old HTML as it is, or implement complex solutions to automate your workflow, you will be able to find the one which fits your needs. At first glance, it seems that there is a huge list of options that is easy to get lost in, but when you get into the details, you get several tools in each category.
And one more important thing: whichever option you choose, don’t start sending your emails without thoroughly testing them. Each of these tools promises to be compatible with the majority of email clients, even with the trickiest ones like Outlook. But still, there is no guarantee that your template will work according to design. Take a look at our email testing checklist: a guide to testing your emails and a list of 38 tools for every occasion.