MJML — Responsive Email Made Simple

Introduction

MJML is an open-source framework created by Mailjet that abstracts away the painful complexity of coding responsive HTML emails. Instead of wrestling with nested tables, inline styles, and client-specific hacks, you write semantic MJML markup and the engine produces battle-tested HTML that renders correctly across Gmail, Outlook, Apple Mail, and dozens of other clients.

What MJML Does

• Compiles semantic MJML tags into responsive, table-based HTML email markup
• Handles CSS inlining and client-specific conditional comments automatically
• Provides 30+ built-in components (columns, buttons, images, carousels, accordions)
• Validates markup and warns about unsupported patterns before send
• Supports custom components for reusable email design systems

Architecture Overview

The MJML engine parses the XML-like markup into a component tree, where each component (mj-section, mj-column, mj-text) knows how to render itself as nested HTML tables with inline styles. The renderer walks the tree top-down, calculating responsive breakpoints and generating media queries. Output is a single self-contained HTML string ready for any email service provider.

Self-Hosting & Configuration

• Install via npm as a CLI tool or programmatic Node.js library
• Use mjml2html() function in Node.js for server-side rendering
• Configure minification, validation level, and output format via options
• Integrate with build tools using gulp-mjml, webpack-mjml-plugin, or Vite plugins
• Deploy a rendering microservice with the Node.js API for dynamic email generation

Key Features

• Cross-client compatibility tested across 50+ email clients
• Mobile-responsive layouts with configurable breakpoints
• Component-based architecture for reusable email patterns
• VS Code extension with live preview and syntax highlighting
• API available for server-side rendering in any language via HTTP

Comparison with Similar Tools

• React Email — React Email uses JSX syntax; MJML uses its own XML-like markup purpose-built for email constraints
• Maizzle — Maizzle uses Tailwind CSS for email styling; MJML abstracts layout concerns entirely
• Foundation for Emails — Foundation requires manual table coding; MJML generates tables from semantic components
• Handlebars + inline CSS — Manual approach with no responsive guarantees across clients
• Cerberus — Cerberus provides HTML templates; MJML is a compiler that generates the HTML for you

FAQ

Q: Does MJML support dark mode? A: Yes. MJML components support mj-attributes and custom CSS that can target dark mode media queries in supported clients.

Q: Can I use MJML with my existing email service provider? A: Yes. MJML outputs standard HTML that works with SendGrid, Mailgun, AWS SES, Postmark, or any provider that accepts HTML email.

Q: How do I create custom reusable components? A: Define custom components by extending the base MJMLComponent class in JavaScript and registering them with the engine.

Q: Does MJML work without Node.js? A: The primary engine runs on Node.js, but community ports exist for Python and a public API is available for other languages.

Sources

• https://github.com/mjmlio/mjml
• https://mjml.io/documentation