What is MJML?

MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.

mjml

A MJML document starts with a <mjml> tag, it can contain only mj-head and mj-body tags. Both have the same purpose of head and body in a HTML document.

mj-head

mj-head contains everything related to the document such as style and meta elements. It supports custom head elements and can be registered through registerMJHeadElement(<string> name, <function> handler) api from mjml-core, it acts as a pre-render hook. Note that this tag is optional.

mj-body

mj-body contains everything related to the content of your email. It supports custom elements too and can be registered either through registerMJElement(<MJMLElement> class) api from mjml-core or via a .mjmlconfig file. Unknown element from mjml-core are simply ignored. Note that mj-body should have only one root element due to how React works.

File Extension

Note that the file must be a file with a `.mjml` extension.

mj-include

The mjml-core package allows you to include external mjml files to build your email template.

You can wrap your external mjml files inside the default mjml > mj-body tags to make it easier to preview outside the main template.

The MJML engine will then replace your included files before starting the rendering process

<!-- header.mjml -->
<mj-section>
  <mj-column>
    <mj-text>This is a header</mj-text>
  </mj-column>
</mj-section>

<!-- main.mjml -->
<mjml>
  <mj-body>
    <mj-include path="./header" /> <!-- or 'header.mjml' -->
  </mj-body>
</mjml>