Transactional Email Template Development with MJML

We built an email campaign for an online store. The layout was table-based, tested in Gmail — all good. But in Outlook 2016, the email fell apart: button misaligned, fonts missing, image not loading. Sound familiar? MJML fixes this.

The problem is that Outlook uses Word for HTML rendering, not Edge or WebKit. According to Litmus stats, about 9% of users open emails in Outlook. MJML solves this pain: you write components in a declarative language, and the output is valid table HTML tested in over 90 email clients. We use MJML together with Handlebars and Node.js so that templates are not only beautiful but also easily integrated with any backend.

Why MJML saves you from Outlook headaches

MJML ensures Outlook compatibility by generating table layout with VML code that renders correctly in Outlook. We test each template on 5 Outlook versions via Litmus. With over 50% of emails opened on mobile, MJML automatically creates media queries and fluid tables for iPhone 15, Samsung Galaxy, and desktop. Development speed jumps: a typical table-based template takes 3–4 hours by hand; with MJML, it’s 30–40 minutes, reducing error probability.

How we do it

Consider a real case — an electronics online store. The client wanted 4 transactional emails: order confirmation, shipping notification, password reset, and welcome.

Stack: MJML 4.15, Handlebars 2.0, Node.js 20 with TypeScript, mjml CLI compiler, testing in Litmus.

We created a common base using mj-attributes for fonts, colors, and buttons. For each email we wrote an MJML component, splitting into sections: header, content, cta, footer. Dynamic data (name, order number, products) uses Handlebars variables.

Example — order confirmation with a products table. We used <mj-table> for rows so they display correctly in Outlook. The "Track Order" button was made with <mj-button> — it generates VML for Outlook.

After compilation, HTML files ~15 KB each. Backend integration via a Node.js function that takes JSON with order data, substitutes through Handlebars, and returns ready HTML for sending.

Work process

1. Analytics — identify email types, agree on layouts and texts.
2. Design — create prototypes in MJML, show client in test environment.
3. Implementation — code templates, add Handlebars variables.
4. Testing — run through Litmus, fix bugs in Outlook and mobile clients.
5. Deployment — deliver HTML files or Node.js rendering code, write integration documentation.

Estimated timelines

A set of 3-5 transactional templates (order, reset password, welcome) — 4-6 business days. Complex templates with custom animation or AMP for email — up to 8 days.

What's included in the work

• MJML source files (components)
• Compiled HTML files
• Handlebars templates for your backend
• Integration instructions for SendGrid, Amazon SES, or any SMTP
• Litmus testing report with screenshots
• Guarantee of correct rendering in Outlook, Gmail, Apple Mail
• 14-day support after delivery

Why MJML is better than manual table layout

How to test templates across all email clients

We use services like Litmus or Email on Acid — they take screenshots in real clients. For quick local testing — MJML Preview extension for VS Code or mjml -w command for auto-rebuild. For functional testing — sending to a test inbox via Mailtrap.

Tested clients

Contact us to evaluate your project. With 5 years of experience and over 50 delivered projects, we'll prepare a proposal in 1 day — with stack selection and timelines. Order turnkey development starting at $500 per template set and get responsive templates guaranteed to work in Outlook. Get a free consultation on your templates.