---

If you’re producing a large number of email templates, making frequent layout changes, using responsive design, working with a team of other developers, or creating emails at the direction of a design team, coding by hand is going to be difficult to sustain. 

What if there were a faster, more streamlined way of coding emails? What if there were languages that already understood some of the intricacies of email development? Thankfully, responsive email frameworks exist and are just the tool developers need to make DIY email development more efficient (and enjoyable).

What is a responsive email framework?

Responsive email frameworks can be as simple as a collection of HTML and CSS boilerplate templates or a complex application that uses programmatic methods (like Node.js). 

The purpose of email frameworks is to take on all the heavy lifting of the email development process. They include up-to-date workarounds for tricky email clients, display considerations for different devices and browsers, and responsive HTML tailored specifically to email.

The benefits of using email frameworks

Email frameworks either already include code or output code from a custom markup language that accounts for all the peculiar display situations an email might encounter. By relying on a responsive email framework to assist you with the development process, you can: 

• Free your mind from the burden of having to constantly keep tabs on the ever-changing intricacies of cross-platform and cross-device display
• Develop emails more quickly
• Create emails with fewer errors
• Avoid outdated and unmanageable template libraries
• Reduce email template development costs

Nine of the best email framework options

Depending on your needs, there are quite a few responsive email frameworks to choose from. Below are several great options: 

1. MJML

Mailjet Markup Language (MJML) is both an open source markup language and transpiling engine built with ReactJS. MJML provides developers with simplified code for building email templates using their <mj-*>-style markup. Instead of coding your own lengthy nested tables and writing out all the client-specific CSS, you can use simple tags like such as <mj-section> and <mj-column> and MJML will translate it into the correct responsive HTML and inlined CSS. 

MJML was originally developed by Sinch Mailjet to generate HTML for responsive emails in Mailjet’s drag-and-drop email campaign builder, Passport. However, the team at Mailjet realized that their system could be incredibly useful to other email developers who were tired of wrestling with the complexities of responsive email design. In 2016, they released it as an independent and open-source framework under the MIT license.

Get some basic advice on how to use MJML in a recent episode of Notes from the Dev: Video Edition with Megan Boshuyzen and special guest Nicole Hickman.

Key features of MJML

• It’s always up-to-date. The contributors to MJML stay on top of changing requirements for email clients so you don’t have to. 
• It’s free to use. You can try MJML’s online live editor or download MJML’s desktop app for free, right now. 
• It’s extensible to other coding platforms via plugins. MJML plugins are available for the free text editors Atom and Visual Studio Code, as well as the paid platform Sublime Text.
• Modular approach. MJML uses pre-built component tags like <mj-image>, <mj-article>, and <mj-carousel> allowing you to focus on email content instead of style. It also gives you the ability to create your own components. Learn more about how MJML components work.
• It’s supported on most email clients. MJML works on all the most popular email clients (yes, even Outlook). Learn more about MJML component support across various clients.
• It utilizes mobile-first output. In an age where so many people are checking email on their smartphones instead of their desktop computers, it makes sense to design your emails for mobile-first display. MJML is designed to do just that.
• It offers thorough documentation and getting started guides. MJML provides detailed documentation, tutorials, and guides.
• It’s community-driven. Unlike proprietary software, MJML is open source and welcomes contributions from other developers. This ensures that MJML will grow and expand in direct response to the needs of the developer community. Check out the source code on GitHub.
• It can be used in proprietary commercial products. Since MJML is released under the MIT license, it can be used in an application without making the entire product open source.
• MJML can be used as a JSON object. MJML is not limited to being used as markup. It can also be used as a JSON object, which is handy for software engineers who want to use it with the MJML API or for other programmatic purposes.

Who is MJML designed for?

• Beginner to advanced email developers
• Individual email developers
• Email development teams
• Email marketing software developers

Reviews from MJML users

“Excellent email development framework that's saved me hundreds of [h]ours in development time. Documentation and community support are amazing. Getting up and running is pretty quick if you have HTML and CSS experience, and their "try it live" feature is super helpful to get community support.”

Trevor R
Source: G2.com

“It used to take me days to create new emails, and there aren't very many email builders out there that will allow a lot of customization without having in-depth knowledge of coding/HTML. MJML is a god-send and it is completely free and open sourced.”

Emily Brooke Robertson
Source: Producthunt.com

“MJML is amazing. I transformed our company's email process by using MJML to compile down to Twig templates so our Symfony apps can populate the data. Never going to look back.”

Joshkrz
Source:Reddit

Find out more about how to get started with MJML.

2. Foundation for Emails

Foundation for Emails is an email development framework that uses the Inky templating language. It’s a product of the ZURB Foundation, which also offers Foundation for Sites. Like MJML, it generates responsive HTML emails that work in any email client. 

There are two different versions you can download: the CSS version and the Sass version. If you use the CSS version, you’ll get a ZIP file with boilerplate HTML, 11 email templates, and all the CSS you need to get started. Before you can send your email, you’ll need to run it through Foundation for Email’s Web Inliner tool.

If you use the Sass version, you’ll get more control over the email framework and a complete build process. This includes a Sass compiler, image compression, Foundation’s custom Inky HTML language, a built-in inliner, and a live reloading server so you can test your emails in real-time. 

Note: For the Sass version, you’ll need to install Node.js.

Key features of Foundation for Emails

• It’s always up-to-date. The ZURB team keeps their framework updated with current email client requirements. 
• It’s free to use. You can download either the CSS or Sass version for free.
• It has a customizable tool stack. Foundation for Emails uses a suite of tools called the ZURB Stack to help make your email development process more efficient. One of the nice things about the ZURB Stack is that it’s customizable, so if there are features you don’t need or ones you want to add, you can make those changes to suit your needs.
• It uses a modular approach. Foundation for Emails uses component tags like <container>, <row>, and <column> that simplify the coding process. Learn more about Foundation for Emails’ components.
• It has a built-in inliner. Foundation for Emails gives you the option to use their Web Inliner tool with the CSS version. But if you’re using the Sass version, that same tool is used in the ZURB Stack to automatically inline your emails.
• It’s supported on most email clients. Foundation for emails creates responsive designs that are supported on almost every email client.
• It has detailed documentation. Foundation for Emails has extensive documentation and offers both free lessons and paid courses.

Who is Foundation for Email designed for?

• Advanced email developers
• Individual email developers
• Email development teams

3. Maizzle

Maizzle is an HTML email development framework that’s powered by Tailwind CSS and Node.js. Rather than using custom tags – requiring you to learn a whole new markup language – you’ll use standard HTML and Tailwind’s utility classes. This gives you full control over your markup, but eliminates the handy shortcuts that custom markup languages offer. 

Maizzle’s build system uses environment configurations that allow you to create custom build scenarios for your workflow via JavaScript config files. You can set options programmatically or require() packages. The templating logic uses PostHTML so you can use partials, loops, and fetch remote content. GitHub Flavored Markdown (GFM) is also supported.

Maizzle requires Node.js to run. When you download Maizzle, you’ll get a CLI tool, the Maizzle framework, and a starter project. You’ll also have the option to purchase any number of premium email templates to work from.

Key features of Maizzle

• It’s always up-to-date. The ZURB team keeps their framework updated with current email client requirements. 
• It’s free to use. You can download and implement Maizzle for free. You can choose from several free starter projects compatible with specific email platforms like AMP for Email. If you want to use any of Maizzle’s premium templates, you’ll need to purchase them.
• It makes coding faster with Tailwind CSS. With Tailwind CSS, you can just add classes to your markup. When your emails are ready for production, Maizzle automatically inlines your CSS and provides an email-tailored tailwind.config.js file that includes settings for optimal email client support.
• It offers PostCSS plugins. Maizzle includes some PostCSS plugins that enable optimizations like shorthand values and nested CSS.
• It automatically generates plaintext versions of emails. Simply add plaintext key in your config.js file.
• It has design flexibility. Unlike MJML or Foundation for Emails, Maizzle doesn’t translate custom markup to a pre-structured HTML format. You can use spongy, fluid, responsive, or hybrid methods of coding your emails. While Maizzle has Tailwind CSS configured for a desktop-first responsive approach, you can use utility classes to target desktop environments and responsive utility variants for mobile clients. 
• It offers WordPress API support. Create email newsletters from your posts with Maizzle and the WordPress API.
• You can easily create AMP for Email templates. If you want to create interactive templates with AMP for Email, you can use Maizzle’s AMP for Email config files. 

Who is Maizzle designed for?

• Advanced email developers
• Individual email developers
• Email development teams

Reviews from Maizzle users

“I love the choice of utility classes for email development. Writing a bunch of small, single-purpose CSS classes to style a component is really a more efficient way to writing inline CSS. 

Maizzle also includes a lot of niceties specific to email developers, such as sensible and customizable CSS inlining, accessible <table> tags, setting base image url ONCE, automatically adding url parameters, automatically preventing widows, and more.

Also while TailwindCSS defaults to modern units like rem and vh, Maizzle’s default output uses units like px and attributes like bgcolor (also still a thing in email development). Maizzle does this by customizing tailwind.config.js with email-friendly CSS. This is a huge piece that I was missing from previous attempts to use a modern web framework to build emails 🔥.”

Ted Goas
Source: dev.to

“Thankfully on my last project I found Maizzle which was built on top of Tailwind CSS. You still need tables and everything, but the CSS inlining has been automated on build for you.” 

cuplizian
Source: Reddit

4. Bojler

Bojler is a simple email framework that makes it easier to develop responsive, lightweight email templates that display perfectly across most email clients. An open-source project created by Slicejack, based out of Split, Croatia, Bojler started out as a single boilerplate HTML file and has grown into a larger framework. 

Bojler is built with Sass and requires Node.js and NPM to run.

Key features of Bojler

• It’s free. You can download the latest release from GitHub.
• It’s open source. If you want to contribute to the project, you can read their contribution guidelines.
• It uses a built-in inliner. Bojler includes Sass lint, automatically transpiles Sass to CSS, and inlines your CSS in real-time when you make a change.
• It includes a boilerplate template. It’s not fancy, but it does include a boilerplate template to start from.
• It’s built with Sass. You can modify and extend Bojler with mixins and nesting using Sass.
• There’s no custom markup language to learn. Bojler uses standard HTML and CSS. 
• It has a responsive design. Bojler allows you to create responsive email templates with utility classes and custom breakpoints on a 12-column grid system.
• It has fairly broad client support. Emails created using the Bojler email framework are supported on most clients and devices. 

Bojler does include some reset styles, custom typography styles, and utility classes, but they’re fairly limited. It also includes a couple of prebuilt components, but they’re restricted to hero image and button components. 

Who is Bojler designed for?

• Advanced email developers
• Individual email developers
• Email development teams

Reviews from Bojler users

“Open source email templating tool that's better-suited for devs than for designers.”

Sarah
Source: Slant.co

5. Cerberus

Cerberus is a collection of HTML email patterns and templates developed by Ted Goas. They can be used as a jumping off point to create responsive emails that work across all major email clients. 

Cerberus’ templates are designed for mobile-first display and optimized for assistive technologies. Sections of code are broken up into blocks that can be moved, combined, nested, copied, and reused to quickly build an email. Email templates are annotated with comments explaining each block, which is especially helpful for those who are just starting out in email development.

Cerberus utilizes standard HTML and CSS, so you can use it in any other framework or email service provider (ESP). It should be pointed out that the developer of Cerberus recommends against using an inliner. 

“Cerberus is supposed to be simple and should not require a dependency like a CSS inliner. The placement of Cerberus’ CSS is already optimized. The SCC in the <head> is meant only for email clients that parse CSS in this location. It doesn’t need to be inlined.” 

Ted Goas, Cerberus Creator

He has a few other things to say on the topic of inlining Cerberus emails, if you’re curious.

Key features of Cerberus

• It’s free. You can download Cerberus from GitHub.
• It’s open source. Want to contribute? Just @TedGoas on Twitter.
• It’s simple and straightforward. There’s no need to download Node.js or deploy server environments. It’s just a collection of well-designed responsive HTML email templates. If you’re not looking to create especially complex emails, Cerberus may be an easy solution to speed up your workflow.
• It’s great for beginners. Not only are Cerberus’ email templates easy to use and include comments that explain what’s happening in each block of code, the documentation offers helpful tips on email development best practices. There’s information about hybrid vs. responsive CSS, Outlook conditional CSS, dark mode, and more.
• It works with any ESP. Since the code is standard HTML and CSS, you can import it into any ESP. There’s no need to transpile it or inline it beforehand.
• It’s supported by most popular email clients. Cerberus email templates have been tested and reported as working in most widely-used email clients. However, Ted’s stated definition of working is: 

“When I say ‘tested’, I mean ‘email doesn’t fall apart’. I don’t mean, ‘Everything is pixel perfect in Outlook’ or, ‘It looks the same after it’s been forwarded’ or, ‘I found a way to make media queries work everywhere.’ They don’t.”

Ted Goas, Cerberus Creator

So, as always, remember to conduct some pre-deployment testing with Email on Acid to preview emails in any framework before hitting send.

Who is Cerberus designed for?

• Beginner to advanced email developers
• Individual email developers

Reviews from Cerberus users

“I’ve found Ted Goas’ Cerberus templates very useful. I customized them, extracted them into modules and created a design system which I then translated to an email CMS. Coverage is pretty good although Outlook still glitches in some circumstances.”

Andrei_says_
Source: news.ycombinator.com

“I've played with Cerberus HTML email framework. It was good but it lacks some advanced features.”

chubbykc
Source: Reddit

6. Acorn Email Framework

Acorn Email Framework is based on a 600px-wide, four-column golden ratio typography grid. It’s a responsive email framework that focuses on clean code, reusability, and utility classes. Lightweight and easy to learn, it has broad email client compatibility and the template code is tested using Email on Acid.

Acorn Email Framework comes with a layout file that doubles as a boilerplate template. It includes all the CSS, tags, and attributes that Acorn requires for proper rendering. While Acorn Email Framework is free, you can purchase affordable additional template packs through ThemeForest.

Key features of Acorn Email Framework

• It’s free. You can download Acorn Email Framework from GitHub.
• It’s simple and easy to use. Acorn is a straightforward HTML and CSS templating tool and doesn’t require learning custom markup or installing any other programming languages. 
• It’s great for beginners. Acorn Email Framework includes in-depth documentation that walks you through every part of their framework, making learning about email templating a breeze. 
• Premium templates are designed for specific ESPs. If you work primarily in a certain ESP, you can purchase one of Acorn’s premium template packs that are pre-integrated with four different ESPs and compatible with an additional ten. 
• It provides retina image support.
• It has interactive components. Add hamburger menus or accordions to your emails.
• It offers responsive utilities. It includes reverse column stacking, column sizes and offsets, alignment, spacing, and visibility.
• It’s compatible with the majority of email clients. It even includes Outlook and Windows Mail retina background image support. 

Who is Acorn Email Framework designed for?

• Beginner to advanced email developers
• Individual email developers

Reviews from Acorn Email Framework users

“Easily the best email developers offering templates on ThemeForest. This template in particular has an amazing collection of modules, many of them highly innovative and you can tell that tremendous thought has been put into the coding of the HTML to ensure that it has the widest possible support among email clients. The design is also top-notch, is current and provides a ton of flexibility while remaining consistent. Two thumbs up!”

Mike-warning
Source: ThemeForest

“This email template is absolutely perfect, and the support is first class and fast!”

Hercules_Design
Source: ThemeForest

“The email template itself is great, very well coded, fantastic design, and so easy to work with. Just what I was looking for for my email campaigns!”

PaulBakker
Source: ThemeForest

7. Inkcite

Inkcite is an email framework that uses modular design to build responsive emails. While it doesn’t exactly employ a custom markup language, it does use something similar called Helpers. Helpers look a bit like HTML tags, but they’re wrapped in curly brackets.

Example:

{button id="order-now" href="http://mystore.com"}ORDER NOW{/button}

Their framework also uses email components like variables, partials, and conditionals, that help to expedite email development workflow and reduce coding errors. Additionally, Inkcite makes use of versioning, testing, image optimization, and code minification.

Inkcite comes with three different environments – development, preview, and production. The environments direct email development workflows so that errors are caught and changes are easily made before your email gets sent out the door. Here’s how each environment functions:

• Development. Allows you to develop the email and content locally.
• Preview. Lets you send email previews to yourself, other developers, copy editors, or clients. This way, everyone can proof for content changes or coding issues before your email heads to production.
• Production. This is when images are uploaded to your CDN, qualified URLs are inserted into your HTML, link tracking and tagging is applied, HTML is minified, and failsafe checks are executed. If you have any outstanding warnings or errors, Inkcite will not create production-ready files.

Key features of Inkcite

• It’s free. You can install Inkcite from the command line: gem install inkcite. Inkcite is a Ruby gem, which comes pre-installed on Mac OS and Linux. If you use Windows, you’ll need to download RubyInstaller.
• The development environments eliminate errors in your final product.
• It supports media queries and fluid-hybrid responsive design.
• Helpers make coding emails easier. Inkcite’s Helpers eliminate duplicate code that can lead to rendering problems, make code more readable and easier to maintain, let you change a component’s properties once and have that change reflected across every part of your email, and help to standardize elements across campaigns. You can even create your own custom Helpers.
• It has variables and partials. Make your code reusable and your emails consistent across your branded campaigns by defining variables and partials. 

• It includes versioning. Inkcite includes support for conditionals and scripting, allowing for dynamic content, A/B testing, and 1-to-many personalization.
• There are tons of automated features:
  • Link tagging and tracking. 
  • Image optimization using ImageOptim.
  • Email-safe HTML minification.
• It has instant compatibility testing with Email on Acid.
• There’s interactive group proofing. Inkcite integrates with Workfront (formerly ProofHQ) for fast and easy collaborative proofing.
• It offers email previews. Send on-demand previews with Inkcite. Prior to sending, your latest image assets are uploaded to your CDN and individual emails are sent to the distribution list you configure.
• There are failsafe rules. Inkcite includes some default failsafes that automatically warn you if your project has Lorem Ipsum text, uses a placeholder or image that’s missing dimensions, or has missing links. You can also include your own custom failsafes.

Who is Inkcite designed for?

• Advanced email developers
• Individual email developers
• Email development teams

8. HEML

HEML is a free, open-source markup language designed to help developers efficiently build responsive emails. If you’re already familiar with HTML and CSS, HEML gives you the same native development feel without having to deal with the usual quirks and complexities involved in coding HTML emails from scratch. Even though HEML is its own markup language, it’s quite similar to HTML so there are no special rules or styling criteria to learn.

HEML is an XML-based markup language and functions as an NPM module that you install in Node.js. The experience of using this framework is designed to make email development feel more like web development. It’s also quite flexible and extensible – you can create custom elements and style rules that you can share with other HEML users, and use contributions from others in the HEML community. 

Key features of HEML

• It’s free. You can use HEML’s online editor, which includes live preview capabilities, or you can install HEML locally using NPM from the command line: npm install heml -g
• It’s easy to use. HEML is designed to look and feel like HTML, so you don’t have to learn a whole new language. But it does the heavy lifting of including predetermined email client compatible HTML code that is associated with each HEML tag. When outputting the code for production, HEML’s rendering engine transpiles the HEML elements into HTML that’s compatible with the most-popular email platforms. Plus, the CSS contained in style tags is parsed and transformed to avoid as many rendering issues as possible.
• It has automatic inlining. Your CSS will be inlined by default (but you can always turn this feature off).
• You can still use HTML, if you want. HEML accepts valid HTML anywhere. You don’t always have to use HEML throughout your emails. 
• It uses a grid system. HEML uses a 12-column grid system. All containers have a width of 100% and a max width of 600px.
• There is documentation and a guide. HEML has detailed documentation and a useful guide that walks you through the basics of creating your first email.

Who is HEML designed for?

• Beginner to advanced email developers
• Individual email developers
• Email development teams

Reviews from HEML users

“Love doing interactive emails with this and keeping your end user in their email while getting feedback. This is brilliant.”

Tracy Sestili
Source: Product Hunt

“It’s simple enough that anyone can follow along. It does help if you know a little about frontend HTML but you can also Google questions as you have them.”

Jake Rocheleau 
Source: Hongkiat

9. AMP for Email

AMP for Email is an email development framework that offers dynamic, interactive functionality. AMP allows developers to securely implement certain interactive features in email that you would normally see executed with JavaScript on a website. Since email doesn’t support JavaScript due to security concerns, AMP for Email is the perfect alternative. You can add forms, live content that refreshes when an email is opened, carousels, and lightboxes – all using AMP for Email. 

The major drawback is that It’s not supported by a large number of email clients. It is, however, supported by some very widely-used ones like Gmail, Yahoo! Mail, and Mail.ru, as well as FairEmail.

Key features of AMP for email

• It’s free. AMP for Email is free to use and includes an online live editor called AMP Playground.
• It increases in-mail capabilities. Create more engaging emails through the use of dynamic and interactive components. Personalize content and let users answer polls and questionnaires, book appointments, and browse a store catalog directly in-email. 
• It’s consistent and scalable. Using AMP in your emails is easy. Simply add a MIME part with a content type of text/x-amp-html as a descendant of multipart/alternative. It should cohabitate with your text/html or text/plain parts and will ensure that your email works on all email clients.
• Improve your customer service and retention. AMP gives you options for more efficient and appealing customer relationship management. Allow subscribers to submit feedback or manage their product subscriptions directly from their inbox.
• It has broad ESP support. While email client support may still be limited, a good number of ESPs are supporting building emails with AMP. The current list stands at almost 40 ESPs.
• There’s extensive documentation for developers. You can find detailed information on developing with AMP on AMP’s website as well as in Google Developer’s Gmail for Developers section.

Who is AMP for Email designed for?

• Advanced email developers
• Individual email developers
• Email development teams

Reviews from AMP for Email users

Not everyone seems to like AMP for Email. There’s actually quite a lot of negative press about it – some developers and end users have concerns about Google’s ethics and the potential for email bloat, and others are worried about security exploits and the logistics of getting wide-spread adoption by ESPs and email clients. But many marketers seem excited for its proven performance in increasing conversions.

The best way to decide if AMP for Email will work for you is to try it out.

Ensure reliable rendering

No matter what framework you use to code your email, make sure you test how it renders in all major email clients before releasing it into the wild. You can use Email on Acid’s Email Previews to test, share, and proof any email output from any framework. Find out how your campaign looks and catch problems before you hit send.

Using an email framework introduces something new into your email production process. So, don't forget to test!