← Back

Responsive emails with mjml

TL;DR: Coding a responsive email template is full of hacks. Use a framework

mjml it's a "Responsive email framework". Basically you write the html using mjml tags and it generates the actual html.

What I liked:

Building blocks (mjml tags) are simple and easy to use
Documentation is great: exhaustive, well written and searcheable
The js library is easy to use and configurable
It seems to be easily extensible (although I didn't need it)

What I didn't like:

The output is really verbose (I guess this is because the responsiveness and all the clients)

Example #

The mjml tags are quite self-explanatory:

<mjml>
  <mj-body width="800px">
    <mj-section>
      <mj-column>
        <mj-button
          align="right"
          background-color="#FAEDE5"
          color="#FF6600"
          href="https://mjml.io/try-it-live/BkkB3Rm48"
        >
          View email live
        </mj-button>
        <mj-text font-size="12px">
          Welcome to mjml
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

There is a live editor where you can see the output of the above example (the output is verbose: responsive emails are full of hacks).

It can be used as a library (via npm package) to generate the html (instead of the live editor):

const mjml2html = require("mjml");
const fs = require("fs");
const path = require("path");

const filename = process.argv[2] || "email.mjml";
const filePath = path.resolve(filename);
const source = fs.readFileSync(filePath).toString();
const result = mjml2html(source, options);

if (result.errors.length) {
  console.log("Error!", result.errors);
  throw Error(`Invalid source ${filename}`);
} else {
  console.log("Result", result.html);
}

Responsive emails with mjml

Example #

Read more #

List of email frameworks #

Responsive email templates #

Create a responsive HTML email from scratch #

Tools #