What Is MJML? Responsive Email Markup Explained

MJML(Mailjet Markup Language) is an open-source framework designed to make writing responsive HTML email easier. It converts a clean, component-based syntax into the complex, client-compatible table-based HTML that email clients require. If you have ever had to hand-write a two-column email layout with nested tables just to support Outlook, MJML is the tool that eliminates that work.

The problem MJML solves

Modern web layout uses flexbox and CSS Grid — powerful, maintainable, and expressive. Email layout cannot use them reliably, because Outlook on Windows (still widely used in corporate environments) uses a Word-based showing engine that does not support modern CSS layout.

The fallback is table-based layout: nested<table>,<tr>, and<td>elements with inline styles for width, padding, and alignment. Writing this by hand for even a basic email design produces hundreds of lines of verbose, hard-to-read markup that is tedious to update.

MJML provides a set of high-level components that convert down to the correct table structure automatically. A two-column section in MJML is three lines. The convertd HTML is fifty.

How MJML works

You write MJML markup using components like:

• mj-section— a horizontal row in the email
• mj-column— a column inside a section, with automatic responsive stacking behavior
• mj-text— a styled text block
• mj-button— a cross-client compatible CTA button
• mj-image— an image with responsive sizing
• mj-divider— a horizontal rule
• mj-social— social media icon links

MJML converts this to standard HTML email with the table structure, VML fallbacks for Outlook, and inline styles already applied.

What MJML is good for

• Responsive columns without hand-coding every screen size table.MJML's column component automatically generates the responsive rule and table structure needed for columns to stack on mobile.
• Consistent components across a team.When multiple people write email templates, MJML components enforce consistency — the same button style, the same section padding, the same image handling — that is hard to maintain in raw HTML.
• Faster version.Changing a brand color, adjusting padding, or updating a heading style is one attribute change in MJML vs hunting through dozens of inline styles in the convertd HTML.
• Maintainable source.MJML source files are much smaller than the convertd output and are readable by anyone familiar with HTML. The convertd HTML is often not intended to be read or edited directly.

Tradeoffs and limitations

MJML is the right tool for most email teams, but it has real trade-offs:

• CSS knowledge is still required.MJML handles layout compatibility, not design. You still need to understand email CSS limits — which properties are supported in which clients, how to write dark mode styles, how to handle web fonts — to build a high-quality email.
• Some designs require custom HTML.Complex image overlays, interactive elements (CSS-only accordions, hover states), and highly custom layouts may require writing raw HTML components or post-convert edits to the output.
• Convertd output is large.MJML generates verbose table-based HTML. A simple email in MJML might convert to 30–50KB of HTML. Watch the total file size — Gmail clips emails over 102KB.
• Post-convert edits are lost on reconvert.If you edit the convertd HTML directly and then reconvert the MJML source, your edits are overwritten. Treat the MJML source as the canonical version and the convertd HTML as output only.

Compiling MJML in the browser

Traditionally, MJML requires Node.js — you install themjmlpackage and run a convert step from the command line or a build tool. For teams with a development setup, this is the recommended approach.

For anyone who wants to work with MJML without a local environment — on a shared machine, a Chromebook, or in a quick test version — Email Viewer includes a browser-based MJML convertr. Paste your MJML, click convert, and see the showed HTML and client preview immediately.

MJML and the broader email workflow

MJML is one piece of a complete email production workflow. After compiling:

• Preview inEmail Viewer across Gmail, Outlook, Apple Mail, and Yahoo client profiles to check showing
• Testdark mode to catch inversion and color override issues
• RunInline CSS on the convertd output for maximum CSS delivery reliability
• Work through thepre-send QA checklist before exporting to your email platform