> This page is part of the [Customer.io documentation](https://docs.customer.io). For the complete index, see [llms.txt](https://docs.customer.io/llms.txt).
> Last updated: July 10, 2026

# MJML framework

[BetaThis feature is new and we're actively working on it.](/accounts/settings/beta-experimental-features/#beta-features)

[MJML](https://mjml.io/) is a markup language that makes it easier to code responsive emails. In Design Studio, 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](/messaging/design-studio/reusable/components-overview/) 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:

```html
<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](https://documentation.mjml.io/#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.

```html
<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](#add-html-to-mjml-ending-tags).

```html
<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.

*   *   [Add MJML to code editor](#add-mjml-to-code-editor)
    *   [Add HTML to MJML ending tags](#add-html-to-mjml-ending-tags)
    *   [Use MJML in components](#use-mjml-in-components)

Copy page

Copy page [Download .md](/messaging/design-studio/emails/code-editor/transformers/mjml.md)

Is this page helpful?

![](https://docs.customer.io/images/export-success.png) ![](https://docs.customer.io/images/export-failure.png)

# How can we make it better?

Close

Do you need help from Customer.io support?  No  
 Yes

What part of Customer.io do you need help with? 

How can we improve this page?

Email (optional):  Please provide a valid email address

 I am not a bot

 

We appreciate your feedback!

Our support team will contact you as soon as possible