Create a responsive email with MJML

Creating a responsive email is a not a simple task since we need to be ready for various clients that are far more diverse than browsers, and less compatible with standards. So instead of generating an HTML with manual construction of tables and testing it accross various clients, it is better to use a ready generator such as MJML or React-Email.

For MJML, you can install it with:

npm install -g mjml

Then run:

mjml -r email.mjml -o email.html

Or with the --watch switch instead of -r to see a live preview whenever you change the file.

It is even better to do it directly from Visual Studio Code by installing the MJML extension which allows to both see the live preview and immediately copy/export the HTML output.

Here is an example of a simple MJML template:

<mjml>
  <mj-body>
    <mj-section background-color="#f0f0f0">
      <mj-column>
        <mj-text font-style="italic" font-size="20px" color="#626262">14.1.2024</mj-text>
      </mj-column>
    </mj-section>
    
    <mj-section background-color="#fafafa">
      <mj-column width="400px">
        <mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">Dear customer,</mj-text>
        <mj-text color="#525252">Please download the invoice by clicking on the link below.</mj-text>
        <mj-button background-color="#F45E43" href="https://alexrait.blogspot.com/?invoice=123123">Download</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>