MJML

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.

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

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.

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.

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.

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.

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.