Introducing MJML : First open source markup language for responsive email

mjml preview

Mailjet launched a new markup language for creating responsive email called MJML. 


Designing an email is extremely complicated. The reason is simple. There are many different webmail clients with backward capability problems. When you make a website, you have to worry about a few versions of web browsers and most of them are standardizing by itself. But when you are designing email you have to worry about different web browsers, plus every webmail client and email software like(Thunderbird, Outlook). Then add up different smartphones and others devices, and it becomes a nightmare.

According to a recent survey by litmus, it shows that more than 50% people nowadays use mobile devices to open an email. So sending an email that will open and interact properly in all of the mobile devices are incredibly important.

top ten email clients

Top ten email clients

Until now most email designers has to use HTML code from 1998 where tables are law and the CSS is only the shadow of itself. Speaking of CSS, you have to insert it inline for more compatibility with Gmail. Then you have to maintain HTML, image and text ratio to pass the spam filter.

anything goes

Image Courtesy:

To tackle those problems, developers from Zurb created a responsive email framework called Foundation for Emails a while ago. It simplifies our task to design a responsive email with many templates and tools that can get CSS inline without having to do it during development. But today I want to talk about MJML, which makes it even more easier to build responsive email.

Responsive Email Framework from Zurb

Responsive Email Framework from Zurb


Discover MJML, a language made for emails

Between a framework and outright a new language, the MJML is a much more radical solution. Its goal is to make the creation of responsive emails much more easier and advance by removing anything that complicates our tasks like tables, CSS properties required for our email looks like something, and so on.

mjml logo

MJML logo

MJML or Mailjet Markup Language is created by Europe largest email service provider Mailjet. Mailjet created this language while working on their drag and drop email newsletter builder passport. They used it in their system over a year then made it public last month. MJML has been designed to reduce the pain of coding a responsive email.

MJML is an open-source markup language which generates high-quality, responsive HTML code compliant with best practice. MJML is written in Node.js leveraging ReactJS.

So it is sort of semantic HTML with new features which you can easily integrate into your email design. Although in MJML CSS is still inline it is restricted to a strict minimum which increases your readability. If you want to stay dry and avoid repeating your style for each element you need, it is possible to create its own elements. But it will require some knowledge of JavaScript and a little more work.

Obviously, it is necessary to compile the result before sending it, but if you already have your CSS inline with a tool that will not change much.

How to use MJML

There is two basic way to use MJML. You can either use their online editor which will render your MJML codes into responsive HTML code. Or can download plugins to use it directly on your computer code editor like AtomSublime Text, and Gulp.

They also have ready-made responsive email templates here.

mjml template example

MJML Template

Finally, it is really easy to install (if you already have Node.js on your computer). Simple to use and with a good learning curve you can easily build beautiful responsive emails. And it is also supported by most email clients:


It is licensed under MIT, which means you can easily use MJML markup language and even use its engine without any restriction. See the Documentation for more info.

Anyone who has had to integrate an email knows, we badly need a new tool for the task. The MJML works really well, so I see no reason not to use it for all your emails templates.

Of course, you may feel slightly limited sometimes to implement certain effects like (overlapping, …), but it it really new and growing so we have to make some adjustment at first. And you can also contribute to its development on Github.

So go wild…

Tanvir Hasan

I am a tireless seeker of knowledge, occasional purveyor of wisdom and also, coincidentally designer, illustrator and front-end developer with a love for all things whimsical and a thirst for learning. I love to drink, read and travel far away. Follow me at twitter: @thetanvirhasan

You may also like...