What Is MJML? A Practical Guide to Responsive Email

Published July 5, 2026 · Updated July 12, 2026

MJML (Mailjet Markup Language) is a free, open-source markup language that simplifies responsive email development. You write clean, component-based tags — <mj-section>, <mj-column>, <mj-text>, <mj-button> — and the MJML compiler transforms them into the table-based HTML that email clients like Gmail, Outlook, and Apple Mail require. The result is reliable, cross-client email rendering without manually writing nested tables, inline styles, or client-specific workarounds.

Why email HTML is so hard to write

If you’ve ever tried to build an email from scratch, you probably ran into the same wall everyone does: the HTML doesn’t work the way web HTML does. A layout that looks perfect in your browser falls apart in Outlook. A two-column design that lines up on desktop stacks wrong on Gmail. Fonts you carefully picked don’t load in half your readers’ inboxes. And the “fix” is usually to wrap everything in nested tables, repeat your styles on every single element, and sprinkle in special instructions just for Outlook.

This isn’t a skill problem — it’s the reality of email rendering. Unlike web browsers, which mostly agree on how to display modern HTML and CSS, email clients are fragmented, inconsistent, and years behind the web. Outlook uses Microsoft Word’s rendering engine (yes, really). Gmail strips entire categories of styling. Apple Mail, Yahoo, and dozens of others each have their own quirks. Writing email HTML that looks right in all of them means accounting for all of those quirks, every time.

MJML (Mailjet Markup Language) was created to solve exactly this. It’s an open-source markup language that lets you describe an email in clean, readable components, then compiles those components into the battle-tested, table-based HTML that email clients actually need.

What MJML actually is

MJML is a layer on top of raw email HTML. Instead of writing hundreds of lines of nested tables, inline styles, and client-specific workarounds, you write short, semantic components:

• <mj-section> — a horizontal band of the email
• <mj-column> — a vertical column inside a section
• <mj-text> — a block of text
• <mj-image> — an image
• <mj-button> — a call-to-action button
• <mj-social> — a row of social media icons

Each of these components encodes years of knowledge about what email clients need. When MJML processes your document, it expands each component into the full HTML — the tables, the inline styles, the responsive rules, the Outlook-specific instructions — all handled for you automatically.

The key idea: you describe what you want (a two-column section with a button), and MJML produces how to render that reliably across clients. A 20-line MJML document can compile into hundreds of lines of email HTML, and every line of that output exists for a reason.

MJML by example: before and after

Here’s a simple section with a heading and a button, written in MJML:

<mj-section>
  <mj-column>
    <mj-text font-size="20px" color="#333333" font-family="Arial, sans-serif">
      Welcome to our newsletter
    </mj-text>
    <mj-button background-color="#007ee5" color="#ffffff"
               font-family="Arial, sans-serif" href="https://example.com"
               padding="16px 32px">
      Read more
    </mj-button>
  </mj-column>
</mj-section>

That’s about 10 lines of clean, readable markup. When MJML compiles it, the output is roughly 60+ lines of nested tables, inline styles, Outlook conditional comments, and responsive rules — all generated automatically. The compiled HTML includes:

• A <table> wrapper with the correct width, cell padding, and alignment
• Inline styles on every element (so Gmail honors them)
• Outlook-specific conditional comments wrapped in <!--[if mso]> tags (so the button and spacing render in Outlook’s Word-based engine)
• A media query that stacks columns on narrow screens

You never write any of that by hand. You describe the structure in MJML tags, and the compiler handles the rendering complexity. That’s the entire value proposition in one example.

Why MJML matters

• Responsive by default. MJML’s column system is built on a mobile-first grid. Columns sit side by side on wide screens and automatically stack into a single column on narrow ones — without you writing a single responsive rule yourself.
• Cross-client reliability. The compiled output includes all the client-specific workarounds (Outlook’s special instructions, inline styling, fallback fonts) baked in. You get the benefit of that hard-won knowledge without having to learn or remember any of it.
• Readable, maintainable source. Because MJML components are short and semantic, you can read an email’s structure at a glance. Updating a button, swapping an image, or reordering sections means touching a line or two — not hunting through a wall of nested table tags.
• Open and community-driven. MJML is open source, maintained by Mailjet, and widely adopted. Hundreds of companies build their emails with it, which means the component output is tested against real inboxes every day.

MJML vs. hand-coded HTML

None of this means hand-coding is wrong — experienced email developers can produce excellent results by hand, and some edge cases need custom HTML MJML doesn’t cover. But for the vast majority of emails, MJML removes the tedious, error-prone part of the work and lets you focus on the content and design.

How MJML handles the hard parts

A few specific problems MJML solves are worth understanding, because they come up in almost every email:

The table layout problem. Email clients don’t reliably support modern layout methods like flexbox or grid. The only structure every major client renders consistently is tables — often several levels deep. MJML generates that table structure for you from simple section and column tags, so you never write a <table> yourself.

The inline style problem. Many email clients (notably Gmail) strip out style rules defined in a document’s head and only honor styles applied directly to each element. That means the same color, font, and spacing rules must be repeated on every single tag. MJML handles this automatically — you define styles once, and the compiled output applies them inline everywhere they’re needed.

The Outlook problem. Outlook (the desktop app, on Windows) renders email through Word’s engine, which doesn’t support many standard CSS properties — background images, certain spacing, rounded corners, and more. MJML’s output includes the special instructions Outlook requires, so designs that would otherwise break in Outlook hold together.

The mobile stacking problem. Making columns stack on mobile requires responsive rules that some clients support and others ignore or mishandle. MJML’s column component handles the stacking logic and the fallbacks, so the same email reflows correctly whether it’s opened on a phone or a desktop.

Common mistakes when using MJML

• Expecting pixel-perfect control over everything. MJML optimizes for reliability across clients, which means some highly specific layouts aren’t possible. Work within its column model rather than fighting it.
• Ignoring image file size. MJML handles the markup, not the assets. Oversized images still cause slow loads and Gmail clipping — optimize and compress before you reference them.
• Forgetting that dark mode exists. MJML output is solid, but dark-mode inversion is a client-side behavior you should design for (test logos, transparent PNGs, and dark text on dark backgrounds).
• Treating the compiled HTML as the source of truth. Always edit the MJML, not the compiled output. If you hand-tweak the generated HTML, your changes will be lost the next time the document is compiled.

How Temway uses MJML

You don’t have to write MJML by hand — or even see it — to benefit from it. Temway is a visual, drag-and-drop email builder that renders every design through an MJML engine. You compose with blocks — text, images, buttons, social links, multi-column layouts — and Temway compiles them into responsive, Outlook-safe, inline-styled HTML on export.

What this means in practice: the rendering problems MJML solves (tables, inline styles, Outlook workarounds, mobile stacking) are handled for you automatically, and you never touch a line of markup. You design visually, preview on desktop and mobile, and when it looks right, export the HTML or push it straight to your ESP. The output is the same battle-tested HTML MJML produces — you just get there by dragging blocks instead of writing tags.

If you ever do want to work with the raw HTML (to drop into an ESP template builder, run through a pre-send checker, or hand to a developer), the exported file is clean, self-contained, and ready to paste.

Frequently asked questions

What does MJML stand for?

MJML stands for Mailjet Markup Language. It was created by Mailjet, an email service provider, and released as open source in 2016.

Is MJML free to use?

Yes. MJML is open source under the MIT license — free to use commercially, with no usage limits. You can install the compiler via npm, use a dedicated MJML editor, or integrate it into any build pipeline.

Does MJML work with Outlook?

Yes. MJML’s compiled output includes the conditional comments and fallbacks that Outlook’s Word-based rendering engine requires. Button backgrounds, spacing, column alignment, and rounded corners all include Outlook-specific fixes automatically — you don’t add them yourself.

Is MJML still maintained?

Yes. MJML is actively maintained by Mailjet, with regular releases, a community of contributors, and wide adoption across the email industry. The npm package is downloaded millions of times per month, and companies of all sizes build production emails with it.

Can I use MJML without writing code?

Yes — that’s exactly what Temway does. It’s a visual, drag-and-drop builder that renders through an MJML engine, so you compose emails by arranging blocks and the compilation is handled for you. You never write or see MJML markup unless you choose to export the raw HTML.

What’s the difference between MJML and HTML email?

MJML is the source you write; HTML email is the output you send. You author in MJML’s clean component tags, and the compiler produces the table-based HTML that email clients render. The compiled HTML is what you paste into your ESP or sending tool — you own it, and it’s self-contained.

Where to go next

• Understand why tables still rule email: Why HTML Emails Use Tables.
• See the responsive design principles MJML is built on: Responsive Email Design.
• Learn how export works and what you get: Export and HTML.
• Start from a proven design in the templates gallery.
• Comparing team-friendly builders? See our best email builder for teams roundup.