4.0.0-beta.2

Feature

• renderChildren can now render JSON children as XML for renderMJML function with rawXML option (#914)
• raw element should now works as expected, they're no more wrapped in tr/td inside mj-column (#935)
• Validation now supports mj-include and validates through included files (#651)
• Documented available options for the CLI and in NodeJS in the readme (#845)

Fixes

• Fix includes issues introduced in beta.1 (#970, #986)
• Fix encoding in MJML attributes (#664 )
• Fix validation issues (#963)
• Fix empty default background-color attribute in body (#964)
• Fix the missing ability to add css-class on mj-link (#892)
• Missing viewport meta has been added back (#967)
• Fix mj-social attributes for custom networks (#982)

4.0.0-beta.1

The first beta for MJML v4 is here. This version is stable enough so you can start using it.

Install with npm install mjml@next.

You don't need to manually update your templates, they are compatible with MJML v4 out of the box (including this beta). To render your templates, you can:

• mjml <yourfile>.mjml -o, the engine will detect if it's using the v3 syntax, migrate it to the v4 syntax, and render it to HTML with the v4 engine. If it's already written in the v4 syntax, it will simply render it to HTML
• mjml -m <original-file>.mjml -o <migrated-file>.mjml. This will simply migrate <original-file>.mjml written with the v3 syntax to <migrated-file>.mjml written in the v4 syntax, so you can start using the v4 syntax easily.

To learn about the changelog, breaking changes and new features, read this article (no breaking change since the last alpha).

4.0.0-alpha.5

Breaking changes

• mj-social now has a new syntax (see here)
• mj-hero-content no longer exists (mj-hero now behaves like a mj-section with a single mj-column)
• the customComponent API is a release candidate. Please submit feedback here: #880

Features

• mjml-core can now receive a skeleton function to redefine the default skeleton (default HTML generated by a MJML boilerplate)
• mjml-cli has been totally redone from scratch
• mjml-cli --watch now supports multiple files (we need heavy testing here with nested includes)
• mj-hero is now supported in MJML 4
• Creating custom components now support this.renderMJML to render MJML inside a component (just use the regular MJML syntax inside your custom component)
• this.htmlAttributes in a custom component now detects if you pass a style key or an object
• If you want to display the desktop layout on Outlook.com instead of the mobile fallback, you can automatically do this with the owa attribute on the mjml tag: <mjml owa="desktop"> (set to mobile by default at the moment). It should be the only client specific attribute in MJML

Fixes

• mjml -V should now output the right version ( cli + core )
• mj-column now properly convert % into px for Outlook comments
• mj-group should now behave as in MJML 3.3.5 👍

Final notes :

The good :

• 3 components need to be ported back in MJML4 👍 then we can flag MJML4 as a beta product
• MJML 3.3.5 will no longer be master and will be a legacy branch like 1.X and 2.X
• New contributions from the community ! Thanks to @ogonkov & @dhcdata for opening PRs

The bad :
We're kind of late on schedule, type system took too much time and will be delayed for MJML 4.1. The type system will check the format of any mj-attribute and provide useful debug tips when the unit used is the wrong one.

3.3.5

Fix because of major issue in 3.3.4 ( should be the real last release this time )

Fixes

• HTML comment in mj-raw no longer break the email thanks to @witzig PR !

3.3.4

Note : This should be the last release of MJML 3 branch, (if no breaking bug is found in this release)

Features

• mj-image supports srcset attributes thanks to @ctborg
• mj-button supports text-align now #699
• mj-carousel-image supports title attribute #734

Fixes

• mj-social logo can have extra height on Outlook
• mj-section with a background image can have extra 20px padding on Outlook solved by @ogonkov
• Encode thin arrows -> <- to prevent issue with the XML parser solved by @zouxuoz
• Documentation warning on base-url for mj-social not applied to custom network
• Replacing deprecated fs-promise with mz thanks to @jackytck
• If mjContent has more than one react node it no longer adds an unwanted , see #675 thanks to @etiennemarais

Thanks to @zouxuoz and @jamesblight for contributing on the documentation

4.0.0-alpha.3

To follow the advancement of MJML 4, please have a look at this PR: #706

Breaking changes

• MJML doesn't use React anymore, meaning custom components created for a previous version of MJML don't work anymore
• mj-container and mj-body are merged into a single mj-body component. Templates created for a previous version of MJML to be adapted to reflect this change.
• The structure of the mj-social component changes for more consistency, following the semantic structure below. Templates created for a previous version of MJML to be adapted to reflect this change.

<mj-social>
  <mj-social-link name="facebook" ... />
  <mj-social-link src="custom-icon-url" ... />
</mj-social>

Features

• mj-column now supports the padding attribute (especially useful to create gutters between columns!) (#160)
• Full-width sections are now correctly displayed in Outlook desktop (#284)
• mj-raw doesn't alter the xml/html content anymore (such as auto-closing tags) and is added in the HTML output where it is expected (cf #485 & #600)
• The new component mj-breakpoint enables to change the default breakpoint used by MJML
• The new API createComponent enables you to render MJML inside a component without importing it
• Attributes inheritance is now supported when using MJML inside components

List of components supported in this alpha

• mj-preview
• mj-body
• mj-wrapper
• mj-section
• mj-column
• mj-group
• mj-button
• mj-image
• mj-text
• mj-divider
• mj-spacer
• mj-social (new syntax)

3.3.3

Features

• New component: mj-preview in mj-head enables to set an email preview that will be displayed in email clients but hidden from the body of the email (#388)
• New attribute: all MJML body tags now support the css-class attribute. The class name set in css-class will be passed to the root HTML element created from the MJML tag as well as the Outlook conditional comment if any, with a -outlook suffix (#532)
• New attribute: mj-button, mj-image, mj-carousel-image, mj-location, mj-navbar and mj-social now support the rel attribute (#533)
• mj-social now supports the border-radius attribute (#556)

Fixes

• The line-height attribute of mj-button is now set to 1.2 by default to avoid any issue with multi-line buttons thanks to @rogierslag
• The text-transform attribute on mj-link is now correctly validated by the mjml-validator (#596)
• The alt attribute on mj-image is now set to 13px by default instead of 0px to avoid it from being invisible

3.3.3-beta.3

Features

• Adding new mj-preview tag in mj-head to set an email preview that will be displayed in email clients but hidden from the body of the email (cf https://litmus.com/blog/the-ultimate-guide-to-preview-text-support)
• Revert "fully clickable" button because of incompatibility in several email clients

Fixes

• mj-text now only adds the class on the root tr when using css-class
• MJML-Validator should no longer return a validation error about css-class being invalid

3.3.3-beta.1

Features

• mj-buttons are now fully clickable, including in the area set with inner-padding. Thanks a lot to @guillaumebreux for this contribution (#557)
• mj-button has now a default line-height of 1.2 to avoid any issue with multi line buttons thanks to @rogierslag
• mj-button, mj-image, mj-carousel-image, mj-location, mj-navbar and mj-social now support the rel attribute (#533)
• All MJML body tags now support the css-class attribute. The class name set in css-class will be passed to the root HTML element created from the MJML tag (#532)
• mj-social now supports the border-radius attribute (#556)

Fixes

• The text-transform attribute on mj-link is now correctly recognized by the mjml-validator (#596)
• The alt attribute on mj-image doesn't have a default font-size set to 0px anymore but to 13px instead

3.3.2

Fixes

• Hotfix to prevent the sanitizing of < & > from breaking inline styles