What Is MJML? The Framework for Responsive Email

Overview

MJML (Mailjet Markup Language) is an open-source framework for building responsive HTML email. Instead of hand-writing the nested tables, inline styles, and Outlook hacks that email clients demand, you write clean semantic components like <mj-section> and <mj-column>, and MJML compiles them into the bulletproof, cross-client HTML underneath. It exists because coding email by hand is tedious and fragile — MJML makes it readable and reliable.

How MJML works — a quick before/after

You write a short, semantic markup describing the layout, and the MJML engine compiles it to the verbose, table-based HTML that renders consistently across Gmail, Outlook, and Apple Mail. A two-column responsive section that would be ~100 lines of nested tables and Outlook conditionals by hand looks like this in MJML:

<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>Hello {{name}}</mj-text>
<mj-button href="https://example.com">Get started</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>

Columns stack on mobile automatically — no media queries to write — and the output is bulletproof across clients. The payoff is speed and maintainability: a template that would be hundreds of lines of fragile tables becomes a few dozen readable lines, and because it's just markup, you can version-control it and generate emails programmatically in a build pipeline. See HTML email best practices for why hand-coding is so painful in the first place.

• Clean components compile to bulletproof, table-based email HTML
• Responsive (mobile-stacking) by default — no media queries
• 10x less code than hand-written tables
• Version-controllable; fits build pipelines and programmatic generation

When MJML is the right choice

MJML fits teams that want code-level control and reuse: version-controlled templates, dynamic content, and a shared design system for email. It's the standard for developers building transactional and product emails programmatically. If you'd rather never touch markup, a drag-and-drop builder may suit you better — MJML is for people comfortable with a bit of code who want maintainable, consistent output instead of a black-box editor.

You can run MJML yourself (CLI, a Node/other library, or the online editor), or use a platform that compiles it for you. Mailbase uses MJML for its campaigns and templates, so you get responsive, cross-client emails without hand-coding tables — and the same MJML output flows through the transactional API, campaigns, and A/B tests. That's the rendering benefit of MJML without managing the compiler yourself.

• Best for teams wanting code-level control, reuse, and dynamic content
• Drag-and-drop builders suit pure no-code users better
• Run it yourself (CLI/library/editor) or via a platform
• Mailbase compiles MJML across campaigns and transactional sends

Common Mistakes

• Using modern CSS layout that Outlook silently breaks (use tables).
• Shipping HTML-only emails with no plain-text part — a spam signal.
• Forgetting alt text and a fallback for when images are blocked.
• Not testing on a real phone and in Outlook before sending.

Sources & Further Reading

Official docs for current setup details, pricing, and API behavior — verify specifics there, since they change.

Related guides

More on what is mjml and the surrounding email design workflow:

FAQ

Related reading