MJML for coding responsive email

HTML email has always been dreadful and over the past few years many new frameworks, templates builders, and tools have come​ out to make it easier.

With there being quite a few I decided to ask my friends on Twitter what they recommend:

Overwhelmingly, MJML was the recommended choice and it is one that I’ve never tried but looks really interesting. It’s built with NodeJS and React and here is how they describe it:

MJML rolls up all of what Mailjet has learned about HTML email design over the past few years and abstracts the whole layer of complexity related to responsive email design.

Get your speed and productivity boosted with MJML’s semantic syntax. Say goodbye to endless HTML table nesting or email client specific CSS.

MJML has been designed with responsiveness in mind. The abstraction it offers guarantee you to always be up-to-date with the industry practices and responsive. Email clients update their specs and requirements regularly, but we geek about that stuff – we’ll stay on top of it so you can spend less time reading up on latest email client updates and more time designing beautiful email.

Looking at their first demo here is how the code looks before it’s parsed:

[code lang=text]
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>

<mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

<mj-divider border-color="#F45E43"></mj-divider>

<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
[/code]

This is one I’m going to be looking more into over the coming weeks and I think it may greatly reduce the amount of headache previously required.