Why MJML beats hand-written HTML email

Hand-written HTML email is mostly nested tables. Widths, bgcolor attributes and Outlook conditionals are all baked into the markup so classic Outlook can still lay the message out. It works, but it's hard to read and easy to break. That's the real MJML vs HTML question: which one would you rather maintain?

MJML is a markup language built for exactly this. You write components such as mj-section, mj-column, mj-text and mj-button, and a compiler turns them into the table HTML that inboxes expect. You edit the short source, and the long tables are just output you never have to touch.

What you gain with MJML

Source you can actually read. A promo block is a handful of components, not fifty lines of nested tr and td.

Responsive columns without a second layout. mj-column stacks on small screens by default. Hand-written HTML usually needs a media query and a duplicate structure, and classic Outlook ignores most of that CSS anyway.

Buttons that survive Outlook. mj-button compiles to a table cell with the bgcolor and padding on the cell. A link with CSS padding often shrinks in classic Outlook.

One compile step for client quirks. The MJML compiler writes the VML and conditional comments that lots of teams used to paste in by hand. You still need to check the result in real inboxes, but you write far less of the scaffolding yourself.

MJML isn't a free pass. The inbox never sees MJML, only HTML, and a weak layout is still weak after it's compiled. You'll still want to check widths, images, dark mode and Gmail's clip. See the HTML email checklist.

Button: HTML vs MJML

A shop button that holds up in classic Outlook is a table cell, not a padded link.

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="#1a56db" style="padding: 12px 24px;">
      <a href="https://example.com/shop"
         style="color:#ffffff; text-decoration:none; font-family:Arial, sans-serif; font-size:16px;">
        Shop the drop
      </a>
    </td>
  </tr>
</table>

<mj-button background-color="#1a56db" color="#ffffff" href="https://example.com/shop">
  Shop the drop
</mj-button>

Same job. The MJML version says what you want, and the HTML version is the compiled shape you'd otherwise be maintaining by hand.

One column of copy: HTML vs MJML

Body copy in a 600px column needs the width set on both the table and the cell, so classic Outlook doesn't throw away a CSS max-width.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td width="600" style="font-family:Arial, sans-serif; font-size:16px; line-height:1.5; color:#111111; padding: 16px;">
      Sunday is the last day. The restock is live.
    </td>
  </tr>
</table>

<mj-section>
  <mj-column width="600px">
    <mj-text font-size="16px" line-height="1.5" color="#111111">
      Sunday is the last day. The restock is live.
    </mj-text>
  </mj-column>
</mj-section>

MJML keeps the section and column obvious, and the compiler writes the table widths and cell styles for you.

Two columns: HTML vs MJML

Two text columns are where hand-written HTML gets long. You need two cells, fixed widths and a plan for stacking on mobile.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td width="290" valign="top" style="font-family:Arial, sans-serif; font-size:16px; padding: 8px;">
      Story one. Keep this short.
    </td>
    <td width="20"></td>
    <td width="290" valign="top" style="font-family:Arial, sans-serif; font-size:16px; padding: 8px;">
      Story two. Same weight as the first.
    </td>
  </tr>
</table>

<mj-section>
  <mj-column width="50%">
    <mj-text>Story one. Keep this short.</mj-text>
  </mj-column>
  <mj-column width="50%">
    <mj-text>Story two. Same weight as the first.</mj-text>
  </mj-column>
</mj-section>

On a narrow screen, those MJML columns stack. The HTML version above stays side by side unless you add more markup and CSS, and that difference is most of the reason teams move their source to MJML.

When you still want the HTML file

Your ESP wants HTML it can paste straight in, so give it the compiled file. Keep the MJML in your repo or builder if anyone's going to edit the structure again. For importing the HTML, see export HTML or MJML for your ESP.

If nobody will touch the markup after sign-off, the HTML on its own is enough. If the template's going to change next week, MJML is the file you want in version control.

Edit blocks, export MJML or HTML

Milo Email Studio keeps the draft on a drag-and-drop canvas. Send yourself a test, then export the MJML source or the compiled HTML for whichever tool you send from.

Questions

Is MJML better than HTML for Outlook?

MJML compiles to table HTML that Outlook understands. Classic Outlook never sees the MJML itself. The win is that you write less of that table HTML yourself, and your buttons and columns already follow the patterns Outlook needs. You still test in classic Outlook, as Outlook 2021 end of support and Outlook fallbacks explains.

Can I paste MJML into my ESP?

Only if that tool says it supports MJML, and most expect HTML. Compile it first, then paste or upload the HTML.

Do I need to learn the full HTML table patterns?

Enough to review the compiled output and debug a broken inbox. Day to day, you edit the MJML and recompile. Keep the checklist handy for the final proof.

Try it on your next email