patternjavascriptModerate

MJML: building responsive HTML emails that render everywhere

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

mjmlresponsive emailhtml emailemail templatesemail frameworkoutlook compatibility

Problem

Writing responsive HTML emails from scratch requires deeply nested table-based layouts with hundreds of conditionals for Outlook, Gmail, and Apple Mail. The resulting code is unmaintainable and still frequently breaks in legacy clients.

Solution

Use MJML, a framework of semantic email components that compiles to battle-tested responsive HTML. Write clean component-based markup; MJML outputs the nested-table mess so you do not have to.

Why

Email HTML is stuck in a 2005 rendering model. Tables, inline styles, and VML for Outlook are unavoidable. MJML abstracts this behind a React-like component system and maintains a compatibility matrix across 90+ email clients.

Gotchas

MJML compilation must happen server-side or at build time — do not compile in-browser in production
Custom fonts via @font-face only work in Apple Mail and a few others; always declare a web-safe fallback stack
mj-image always renders as a block element — use mj-text with an <img> inside for inline images
Max width should stay at 600px for email body content to ensure readability in all preview panes

Code Snippets

Compile MJML to HTML in Node.js

const mjml = require('mjml');

const mjmlTemplate = `
<mjml>
  <mj-body>
    <mj-section background-color="#ffffff">
      <mj-column>
        <mj-image width="200px" src="https://example.com/logo.png" alt="Brand Logo" />
        <mj-text font-size="20px" font-weight="bold">Welcome to Brand!</mj-text>
        <mj-text>Thanks for signing up. Click below to get started.</mj-text>
        <mj-button background-color="#3b82f6" href="https://example.com/start">
          Get Started
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
`;

const { html, errors } = mjml(mjmlTemplate, { validationLevel: 'strict' });
if (errors.length) console.error(errors);
console.log(html); // send this via your mailer

Context

Building transactional or marketing email templates that need to render across all major email clients

Revisions (0)

No revisions yet.