Understanding MJML – Email Love

What is MJML?

MJML (Mailjet Markup Language) is an open-source framework that transforms the complex world of responsive email development into something simple and accessible. Instead of wrestling with hundreds of lines of complicated code, MJML lets you create emails using simple, readable components.

Instead of wrestling with nested tables, conditional comments, and client-specific hacks, MJML lets you write clean, semantic code that automatically generates responsive, cross-client compatible HTML.

Why Traditional Email HTML is Challenging

Creating emails that work across all email clients is notoriously difficult:

No Standard Rendering: Different email clients (Outlook, Gmail, Apple Mail) render HTML differently, even between versions of the same client

Limited HTML Support: Many clients strip away modern CSS, requiring inline styles and table-based layouts

Responsive Complexity: Making emails look good on both desktop and mobile requires intricate media queries and fallback code

Time-Intensive: A simple two-column layout might require 800+ lines of HTML with all the necessary fallbacks

How MJML Solves These Problems

MJML acts as a semantic abstraction layer that automatically generates the complex HTML needed for email compatibility. Here's how it works:

Simple, Intuitive Syntax

Instead of writing hundreds of lines of nested tables, MJML uses easy-to-understand components:

<mj-section>
  <mj-column>
    <mj-text>Hello World</mj-text>
    <mj-button href="https://example.com">Click Me</mj-button>
  </mj-column>
</mj-section>

This simple MJML code automatically generates all the complex table-based HTML, inline styles, and cross-client compatibility code needed. While the final HTML output uses old-school table layouts (required for email client compatibility), writing MJML feels clean and organized.

Built-in Responsive Design

Every MJML component is responsive by default. Multi-column layouts automatically stack on mobile devices without additional code.

Cross-Client Compatibility

MJML combines the best of mobile-first and hybrid coding approaches, ensuring emails render consistently across:

Outlook (all versions)

Gmail (web, mobile, app)

Apple Mail

Yahoo Mail

And dozens of other clients

Core MJML Structure

Understanding MJML's hierarchy is key to using the Email Love Figma Plugin effectively:

Basic Building Blocks

Frame - The overall email container (equivalent to your template name)

Wrapper (mj-wrapper) - A table container that holds sections

Section (mj-section) - Horizontal rows in your email

Column (mj-column) - Vertical divisions within sections

Content Components - Text, images, buttons, tables, etc.

The MJML Hierarchy in the Plugin

When you create components in the Email Love Figma Plugin, you'll see this structure reflected in Figma's layers panel:

Email Template (Frame)
└── MJ Wrapper
    └── MJ Section
        └── MJ Column
            ├── MJ Text
            ├── MJ Button
            └── MJ Image

This structure must be maintained for the plugin to properly export your design as MJML code.

Why We Chose MJML for the Email Love Figma Plugin

1. Industry Standard

MJML has become the de facto standard for modern email development. It's:

Widely Adopted: Used by major ESPs and email teams globally

Well Documented: Comprehensive documentation and active community

Actively Maintained: Regular updates to keep up with email client changes

Future-Proof: Backed by Mailjet (now Pathwire) with long-term support

2. Perfect Match for Design-to-Code Workflow

MJML's component-based structure aligns perfectly with Figma's design system approach:

Visual Components: Each MJML component has a clear visual representation

Consistent Structure: Predictable hierarchy makes automation possible

Flexible Styling: Easy to apply custom branding while maintaining functionality

3. Time-Saving Benefits

Our customers consistently report significant time savings:

240 lines of MJML vs 800 lines of HTML for the same email

Automatic responsiveness - no manual mobile optimization needed

Cross-client testing built-in - fewer rendering issues to debug

4. Learning Curve is Minimal

MJML is designed to be approachable:

HTML-like syntax - familiar to anyone with basic web knowledge

Semantic component names - mj-text, mj-button, mj-image are self-explanatory

Forgiving structure - hard to make major mistakes that break email rendering

Working with MJML in the Email Love Figma Plugin

Understanding the Layer Structure

The plugin automatically creates the proper MJML hierarchy when you add components. Here's what each layer represents:

Template Frame: Your overall email canvas

MJ Wrapper: A table that contains all your content sections

MJ Section: Horizontal rows (like header, body, footer)

MJ Column: Vertical divisions within sections (up to 4 columns recommended)

Content Elements: Text, buttons, images, tables, dividers

Key Rules for Success

Maintain Hierarchy: Always keep content within columns, columns within sections, sections within wrappers

Use Figma's Auto Layout: Padding and spacing in Figma translate directly to MJML padding attributes

Don't Break Structure: Moving components outside their proper containers will break the export

Custom Naming: You can rename layers (e.g., "Hero Section" instead of "MJ Wrapper") while maintaining functionality

Component Capabilities

The plugin supports all major MJML components:

mj-text: Rich text with HTML formatting support

mj-button: Cross-client compatible buttons

mj-image: Responsive images with automatic resizing

mj-divider: Horizontal lines and spacers

mj-table: Complex tabular layouts (up to 4 columns recommended)

mj-spacer: Precise vertical spacing control

Advanced Features

Multi-column layouts: Automatically responsive without additional code

Background images: Properly supported across clients including Outlook

Custom CSS: Add your own styles while maintaining MJML compatibility

Brand consistency: Apply your design system through reusable components

The Benefits You'll Experience

For Designers

Design freely in Figma without worrying about email limitations

Visual feedback - see exactly how your email will render

Brand consistency through reusable component libraries

No coding knowledge required for basic email creation

For Developers

Clean, maintainable code - MJML is much easier to debug than raw HTML

Automatic responsive design - no manual mobile optimization

Cross-client compatibility built-in - fewer testing surprises

Rapid prototyping - iterate quickly on email designs

For Teams

Faster collaboration between design and development

Reduced back-and-forth on technical feasibility

Consistent output regardless of who creates the email

Knowledge sharing - MJML skills transfer between team members

Getting Started

The Email Love Figma Plugin handles all the MJML complexity behind the scenes. You don't need to learn MJML syntax to get started - just design in Figma and let the plugin generate perfect email code.

However, understanding these concepts will help you:

Design more effectively by knowing what's possible

Troubleshoot issues when something doesn't export correctly

Customize output by tweaking the generated MJML code

Communicate better with developers about email requirements

Next Steps

Ready to start creating emails with MJML and the Email Love Figma Plugin?

Install the plugin from the Figma Community

Watch our tutorial videos to see MJML in action

Start with simple layouts and gradually add complexity

Join our community for tips, tricks, and best practices

The combination of MJML's powerful framework and Figma's intuitive design tools creates the most efficient email production workflow available today. You'll spend more time crafting great designs and less time wrestling with email client compatibility issues.

Have questions about MJML or need help with the Email Love Figma Plugin? Our team of email experts is here to help with training, support, and custom design system development.