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.

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.

Screenshot showing the mjml starter email
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 reverts to HTML.

mjml-demo.mjmlemail
<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>

Inside ending tags, autocomplete, emmet expansion, mouseover text, etc, switch from MJML to HTML.

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.

my-mjml-button.mjmlcomponent
<component>
<mj-button>
<slot></slot>
</mj-button>
</component>

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

my-emailemail
<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.

my-html-buttoncomponent
<component>
<button>
<slot></slot>
</button>
</component>
my-emailemail
<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.

Mouseover information about the `mj-body` 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.

Screenshot showing mjml validation and help text
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.

Screen recording showing autocomplete on the `mj-section` tag

You can use Emmet expansion to quickly create MJML structures.

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.