# MJML — Responsive Email Made Simple

> MJML is a markup language and framework that generates responsive, cross-client HTML emails from a clean semantic syntax, handling the complex table-based layouts automatically.

## Install

Save as a script file and run:

# MJML — Responsive Email Made Simple

## Quick Use
```bash
# Install CLI
npm install mjml --global

# Convert MJML to HTML
mjml input.mjml -o output.html

# Watch mode for development
mjml --watch input.mjml -o output.html

# Example MJML:
# <mjml>
#   <mj-body>
#     <mj-section><mj-column>
#       <mj-text>Hello World</mj-text>
#     </mj-column></mj-section>
#   </mj-body>
# </mjml>
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-212020b3
Author: Script Depot