The First Alpha For MJML 4 Is Here

A few months back, we announced MJML 4 as a total revamp of MJML, bringing its own lot of improvements and features.

Today, we’re proud to announce that the first alpha is here!

New features

While the core motivation behind MJML 4 was to improve overall performance, it doesn’t stop there. It’s also a good opportunity to get rid of limitations introduced by MJML 3’s architecture and add new features.

Customize the breakpoint of your emails

While MJML comes with all the needed responsive styles by default, you can now easily customize the default breakpoint (480px). All you have to do is use the new head component mj-breakpoint and specify the desired breakpoint as a value of its width attribute.

<mj-head>
  <mj-breakpoint width="540px" />
</mj-head>

Easily create your own custom components

One of the most interesting promises of MJML is the ability to customize the framework, yet one of the things we add to improve. It’s now easier than ever, especially as you can render MJML directly inside your own components and take advantage of attribute inheritance.

Give some air to your columns

A common pattern in email design, gutters between columns enable to add some space in your layout. With the support of padding on columns, gutters between your columns are now a reality! An easy way to create a gutter is adding a background-color and somepadding on your columns, with a different background-color on your columns’ children elements.

Additional features

There are so many that we can’t give them all their own paragraph! Here are some of the other improvements brought with MJML 4:

• Full-width sections now display correctly in Outlook desktop
• mj-raw doesn’t alter XML or HTML anymore

Breaking changes

As for any major update, MJML 4 also comes with some breaking changes that you have to keep in mind when migrating from MJML 3. Here are the main changes you’ll have to reflect on the syntax of your templates when using MJML 4:

mj-body and mj-container become one

A legacy of MJML 2, mj-container isn’t necessary anymore and weighs down the syntax of your email templates. mj-container was removed from the list of MJML components and all of its attribute migrated to mj-body.

A new syntax for mj-social

While mj-social is easy to use, the component can quickly get messy when you add several social networks. To solve this, the component now follows the standard XML syntax like the other MJML components. Here is how you need to use mj-social now:

<mj-social>
  <mj-social-link name="facebook"> Like me on Facebook </mj-social-link>
</mj-social>

Unitless values will no longer automatically convert into pixel values anymore

This means that all of your values need to be given the right unit.

For example:

<mj-text font-size="11" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">

needs to become

<mj-text font-size="11px" padding-left="25px" padding-right="25px" padding-bottom="0" padding-top="0">

Getting involved

As for any alpha, we’re still in early stages with this and we need your help!

To get involved, all you need is to download the alpha version and run it onto your existing templates (after adapting them to MJML 4 breaking changes). We especially welcome help testing:

• mj-breakpoint
• mj-social
• the MJML CLI (rendering works fine but some other options like watching files don’t)
• creating custom components with the new local API

To install it, just run npm install mjml@next and use it like you would with MJML 3.

To give feedback or report issues, please reach to us on Slack or create issues on Github. Read the full changelog.

Love MJML? Don’t miss any news by following us on Twitter and subscribing to the newsletter on the website!