MJML

For creating email templates, we use MJML, a responsive email framework that simplifies writing HTML emails. MJML allows developers to write clean, reusable components that get compiled into fully responsive HTML emails.

Why MJML?

1. Responsive by Default – MJML abstracts the complexity of email responsiveness.
2. Simple Syntax – Reduces the need for manually writing complex, nested HTML tables.
3. Cross-Email Client Compatibility – Works across Gmail, Outlook, Yahoo, and Apple Mail.
4. Reusable Components – Custom components speed up development and ensure consistency.
5. Fast Development – The built-in compiler instantly converts MJML into production-ready HTML.

Getting Started with MJML

MJML can be used through an online editor, CLI, or Node.js.

MJML Online Editor

You can try MJML in the browser without installation HERE

Using MJML globally

Install MJML globally using pnpm:

pnpm i -g mjml

Now, you can convert MJML to HTML using:

mjml input.mjml -o output.html

Using MJML in a project

Install MJML as a local dependency:

pnpm i mjml

Use it in a JavaScript:

const mjml = require('mjml')

const htmlOutput = mjml(`
  <mjml>
    <mj-body>
      <mj-section>
        <mj-column>
          <mj-text>Hello World!</mj-text>
        </mj-column>
      </mj-section>
    </mj-body>
  </mjml>
`)

// Output compiled HTML
console.log(htmlOutput.html)

MJML Structure

Each MJML file follows a simple structure, and provides built-in components that make email development faster. Here' basic example:

<mjml>
  <mj-head>
    <mj-title>My Email</mj-title>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello World!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

MJML Components

Main parts

Typography Components

Media components

Button component

Used to create call-to-action buttons.

<mj-button href="https://infinum.com">
  Click Me!
</mj-button>

Table component

<mj-table>
    <tr>
        <td>Tag</td>
        <td>Description</td>
    </tr>
    <tr>
        <td>`<mj-table>`</td>
        <td>Useful for tabular data.</td>
    </tr>
</mj-table>

Styling in MJML

MJML allows inline styles and attributes for customization.

<mj-text font-size="18px" color="#555" padding="10px">
  Styled Text
</mj-text>

To apply global styles, use <mj-style> in the <mj-head>:

<mj-head>
  <mj-style inline="inline">
    .custom-class { color: red; font-size: 18px; }
  </mj-style>
</mj-head>

<mj-text class="custom-class">This is red text.</mj-text>

Best Practices for MJML

1. Use sections & columns for Layouts

   • Always wrap content inside and to ensure responsiveness.

2. Limit the width of Emails

   • Emails should be 600px wide to look good on most email clients.

3. Use MJML-Specific attributes

   • Example: padding, border-radius, and text-align instead of writing CSS manually.

4. Ensure Accessibility

   • Use alt attributes for <mj-image>.

5. Use Inline Styles Sparingly

   • MJML helps with styling, so avoid excessive inline CSS.

6. Use the MJML Online Editor for quick testing

   • MJML Playground is useful for previewing templates.

Common Issues & Debugging