Email MJML Preview

MJML (Mailjet Markup Language) is an open-source HTML email framework designed to make responsive email coding easy. Instead of writing complex HTML tables and inline styles from scratch, you write semantic MJML components like <mj-section>, <mj-column>, and <mj-text> — and MJML compiles them to battle-tested, cross-client HTML. It's the most popular email templating framework with 50,000+ GitHub stars.

Email clients (Outlook, Gmail, Apple Mail, Yahoo) have notoriously inconsistent CSS and HTML support. Outlook uses the Word rendering engine, which doesn't support flexbox, grid, or many modern CSS properties. Gmail strips <head> styles. Mobile clients need different layouts than desktop. MJML abstracts all of this — it generates responsive, table-based HTML that renders correctly across 90+ email clients automatically.

The desktop preview shows the email at full container width (typically 600px, which is the standard for email width). The mobile preview shows it at 375px, simulating an iPhone SE/14 viewport. MJML's generated HTML includes media queries and fluid layouts that automatically restack columns to single-column on mobile.

<mj-section> is the row wrapper, always inside <mj-body>. <mj-column> is the column inside a section — multiple columns create a multi-column layout. <mj-text> renders text with font and color attributes. <mj-button> creates a CTA button. <mj-image> for images. <mj-divider> for horizontal rules. <mj-table> for HTML tables. All live inside <mjml><mj-head> (metadata) and <mj-body> (content).

In Node.js projects: npm install mjml, then const { html } = mjml2html(mjmlString). For build pipelines, use the mjml CLI: mjml input.mjml -o output.html. For transactional emails, services like Mailjet, SendGrid, and Postmark have native MJML support. The generated HTML should be inlined (use a CSS inliner) before sending — tools like juice or premailer handle this automatically.

600px is the universal standard for email content width. This ensures readability in a two-pane email client (like Outlook with a sidebar) and on most desktop monitors. The actual email container is often wider, but the content table is constrained to 600px with margin: auto. On mobile, MJML automatically adjusts to 100% viewport width.