Intro

First of all, before we start, let’s point out that Creating a responsive email is not an easy task. The main reason is that there is no standard in the way email clients render HTML. Then, while email clients render HTML, many of them have minimal support for it. 

Now, there are a few techniques to help email developers, such as the hybrid approach, the mobile-first approach, or even the Fab Four technique. But because of the reasons stated earlier, and especially the lack of a standard, none of these techniques will enable you to tame all email clients at once.

And that is the moment when MJML steps in.

What is MJML?

MJML is an open-source framework that abstracts away the complexity of responsive email. The idea behind it is pretty simple. MJML abstracts the low-level hacks for responsive emails with an easy syntax. MJML is responsive by design. This means you can forget about nested tables and conditional comments and, more generally, about making your email responsive. MJML does it for you.

MJML is built in React, and it leverages the power of React’s components. The component names are semantic, starting with mj-, so that they are straightforward and easy to recognize and understand: mj-text, mj-image, mj-button, etc. MJML will transpile to responsive HTML, following a mix of the mobile-first and hybrid coding approaches.

Coding in MJML

You can run MJML locally or use the online editor. 

In this article, we will set up MJML locally to use it combined with VS Code.

Launch VS Code and in extensions type: “MJML” and install this plugin:

Before coding, I recommend this short tutorial which is located on the official MJML website.

Now that you have seen the basics let’s continue setting up our working environment.

Let’s create an index.mjml file and paste this code:

1<mjml>
2  <mj-body>
3    <mj-section>
4      <mj-column>
5        <mj-image width="100px" src="https://mjml.io/assets/img/logo-small.png"></mj-image>
6        <mj-divider border-color="#F45E43"></mj-divider>
7        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
8      </mj-column>
9    </mj-section>
10  </mj-body>
11</mjml>

Now press F1 or Ctrl+Shift+P and type “MJML“. As you can see, there are various commands available.

First, let’s see what did we code in our index.mjml and how it looks by selecting: MJML: Open Preview to the Side:

Looks good, and all that in just 11 lines of code! Now, we need an HTML document that can be rendered. For that, we will use the command: MJML: Export HTML, which will generate our index.html file:

As you can see, this HTML file is much longer and much more complex.

Note: A list of all commands for MJML in VS Code.

What next?

This was about setting up and a simple example.

Since MJML official website has excellent and simple documentation, I recommend going through the getting started section. You can also find all sorts of different components that you can use to make your email look great; it has excellent interaction possibilities and responsiveness!

Conclusion

As you can see, MJML is an effortless way to write responsive and great-looking emails, which saves you time and also allows you to write high-level code thanks to reusable and extensible components.