MJML

MJML is a markup language designed to reduce the pain of coding a responsive email. It makes responsive-email easy, intuitive and fast.

Parcel integrates MJML, so you can quickly and easily create responsive emails.

Getting started

Appending .mjml to an email's filename will make it an MJML email. You can also use the MJML Transformer to the same effect.

Silent video of the editor, which is empty. At the top of the editor are four tabs, labeled: "HTML", "Text", "AMP", and "Transformers". The user clicks on the Transformers tab, which replaces the code editor with the transformers pane. The Transformers pane has several sections. The user clicks on the "Framework" section, which reveals a toggle switch labeled "MJML - Enable MJML framework for this email." The user turns this toggle on, and the "HTML" tab changes to "MJML". The file name, visible at the top, changes to include ".mjml" at the end.
Screen recording showing the MJML transformer

If you create a new email ending with .mjml, the editor will auto populate an MJML starter email to help get you started.

Up close image of the code editor with 6 lines of MJML code that form a basic MJML template.
Screenshot showing the mjml starter email

Ending Tags

Ending tags are an MJMl feature that let you use regular HTML content inside an MJML block. When typing between ending tags, autocomplete, emmet expansion, mouseover text, etc, switch from MJML to HTML.

<mjml>
  <mj-head></mj-head>
  <mj-body>
    <!-- content goes here -->
    <mj-raw>
      <div>
        regular old HTML content here
        <img src="example.png" alt="sample image" />
      </div>
    </mj-raw>
  </mj-body>
</mjml>

MJML Components

Any component created with the .mjml file extension will be an MJML component. Components in the editor (all mentions of components on this page) are Parcel components and should not be confused with MJML components.

<component>
  <mj-button>
    <slot></slot>
  </mj-button>
</component>

Use MJML components the same way you'd use regular components in HTML.

<mjml>
  <mj-head></mj-head>
  <mj-body>
    <my-mjml-button>I'm a component built with MJML</my-mjml-button>
  </mj-body>
</mjml>

Standard Components

You can also use regular HTML components within MJML ending tags.

<component>
  <button>
    <slot></slot>
  </button>
</component>

<mjml>
  <mj-head></mj-head>
  <mj-body>
    <mj-raw>
      <my-html-button> I'm a component built with HTML </my-html-button>
    </mj-raw>
  </mj-body>
</mjml>

Hover Information

Mouse over any tag to learn more about how it can be used.

Up close image of the code editor, with a few lines of MJML code in focus. The user has moused over the <mj-body> tag, revealing a hover overlay with additional information. The overlay reads: "mj-body; Allowed children: mj-raw, mj-section, mj-wrapper, and mj-hero. Allowed attributes: width and background-color". Below is a link to the MJML reference for that tag
Mouseover information about the mj-body tag

Validation

The editor will offer validation as you type. Invalid syntax is highlighted with a red underline. The hover text explains the issue. Click on MJML reference to learn more.

Up close image of the code editor, with a few lines of MJMl code. There is a set of <mj-accordion> tags inside the <mj-body> tag, and the <mj-accordion> tags are underlined in red. The user has moused over the <mj-accordion> tag, revealing a hover overlay with additional information. The overlay reads: "mj-accordion cannot be used inside mj-body, only inside: mj-attributes, mj-column, mj-hero". The overlay continues to outline to allowed children and attributes of the tag. Below is a link to the MJML reference for that tag.
Screenshot showing mjml validation and help text

Autocomplete and Emmet Expansion

As you type, the editor will suggest valid tags. Continue typing, or use the arrow keys to select the correct suggestion. Hit Tab to autofill the selected suggestion. Closing tabs are auto added.

Silent up close video of the editor with a few lines of MJML code. The user begins to type <mj-, which reveals an inline menu of MJML tags that start that way. The user selects one, and it is added to the line with it's closing tag.
Screen recording showing autocomplete on the mj-section tag

You can use Emmet expansion to quickly create MJML structures.

Silent up close video of the editor with a few lines of MJML code. The user types "mjml-accordion>mj-", which reveals an inline menu of possible MJML tags. The user selects "mj-accordion-element" and hits tab. The partial text typed is replaced with a set of <mj-accordion> tags with a set of <mj-accordion-element> tags within.
Screen recording showing emmet expansion on the mj-accordion tag

Easy to navigate

All of the Parcel editor features that you know and love also work for MJML emails.

Format your MJML code with a single click.

Click Source to view the compiled code.

Use Inspect Element to easily find your MJML code that produces specific elements in the preview.

Use Focus Mode to keep the preview aligned with the code you're working on.

Previous ArticleNext Article