5

MJML framework

MJMLis a markup language that makes it easier to code responsive emails. Our code editor supports MJML so you can import existing emails with this syntax. This language is not fully supported by our visual editor though. We recommend building your email from components when possible!

Add MJML to code editor

To use MJML in your message:

• Go to Transformers > Framework and turn on MJML
• Or, append your message file with a .mjml extension.

If you create a message from scratch ending with .mjml, the editor will auto-populate this template to help you get started:

<mjml lang="en">
  <mj-head>
    <mj-title>Subject goes here</mj-title>
    <mj-preview>Preview text goes here</mj-preview>
  </mj-head>
  <mj-body>
    <!-- Content goes here -->
  </mj-body>
</mjml>

Add HTML to MJML ending tags

Ending tags, like <mj-raw>, let you add HTML inside an MJML block. Text within HTML won’t be escaped. Check out MJML’s documentation for more information.

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

Use MJML in components

You can create components in MJML by adding .mjml to the filename. You aren’t limited to using MJML though. For instance, you can add standard or custom components to MJML ending tags.

<mjml>
  <mj-head></mj-head>
  <mj-body>
    <mj-raw>
      <x-paragraph></x-paragraph>
      <custom-component></custom-component>
    </mj-raw>
  </mj-body>
</mjml>

While you can create components in MJML, you can’t add MJML inside a component.