MJML Email Editor

Free online MJML 4.15+ editor with real-time compilation, live preview, and responsive email design. Perfect for creating professional email templates that work across all email clients.

Loading editor...

Features

MJML Compilation

Compile MJML to responsive HTML emails in real-time with live preview

Responsive Email Design

Create emails that work perfectly across all email clients and devices

Component Library

Rich set of MJML components for building professional email templates

Live Email Preview

Real-time preview of compiled HTML email with responsive design

Export & Sharing

Export as HTML or share email templates with team members

Frequently Asked Questions

What is MJML and why use it for email development?

MJML (Mailjet Markup Language) is a markup language designed to reduce the pain of coding responsive emails. Unlike traditional HTML emails, MJML abstracts the complex CSS and table-based layouts:

<mjml>
  <mj-head>
    <mj-title>Welcome Email</mj-title>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello World!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

MJML automatically generates responsive, cross-client compatible HTML that works in all major email clients including Outlook, Gmail, Apple Mail, and others.

How to create a basic email template structure?

Learn the fundamental MJML structure and layout components:

<mjml>
  <mj-head>
    <mj-title>My Email</mj-title>
    <mj-font name="Open Sans" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <mj-attributes>
      <mj-all font-family="Open Sans, Arial, sans-serif" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#f4f4f4">
    <!-- Header Section -->
    <mj-section background-color="#2e3440" padding="20px">
      <mj-column>
        <mj-text color="white" font-size="24px" align="center">
          Company Name
        </mj-text>
      </mj-column>
    </mj-section>
    
    <!-- Content Section -->
    <mj-section background-color="white" padding="20px">
      <mj-column>
        <mj-text font-size="16px" line-height="24px">
          Welcome to our newsletter!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This creates a basic email with header and content sections that's fully responsive.

How to add images and buttons to MJML emails?

Enhance your emails with visual elements and call-to-action buttons:

<mj-section background-color="white" padding="20px">
  <mj-column>
    <!-- Hero Image -->
    <mj-image 
      src="https://via.placeholder.com/600x300"
      alt="Hero Image"
      width="600px"
      border-radius="8px" />
    
    <!-- Heading -->
    <mj-text font-size="28px" font-weight="bold" align="center">
      Special Offer Inside!
    </mj-text>
    
    <!-- Description -->
    <mj-text font-size="16px" line-height="24px" align="center">
      Don't miss out on our exclusive deals. 
      Limited time offer ending soon.
    </mj-text>
    
    <!-- Call-to-Action Button -->
    <mj-button 
      background-color="#007bff"
      color="white"
      border-radius="5px"
      font-size="16px"
      font-weight="bold"
      href="https://example.com/offer">
      Shop Now
    </mj-button>
  </mj-column>
</mj-section>

MJML automatically handles responsive scaling and email client compatibility.

How to create multi-column layouts in MJML?

Build complex layouts with MJML's flexible column system:

<!-- Two-column layout -->
<mj-section background-color="white" padding="20px">
  <mj-column width="50%" padding="10px">
    <mj-image src="https://via.placeholder.com/250x200" />
    <mj-text font-size="18px" font-weight="bold">Product 1</mj-text>
    <mj-text>Amazing product description here.</mj-text>
    <mj-button background-color="#28a745">Buy Now</mj-button>
  </mj-column>
  <mj-column width="50%" padding="10px">
    <mj-image src="https://via.placeholder.com/250x200" />
    <mj-text font-size="18px" font-weight="bold">Product 2</mj-text>
    <mj-text>Another amazing product here.</mj-text>
    <mj-button background-color="#28a745">Buy Now</mj-button>
  </mj-column>
</mj-section>

<!-- Three-column layout -->
<mj-section background-color="#f8f9fa" padding="20px">
  <mj-column width="33.33%">
    <mj-text align="center" font-size="14px">Feature 1</mj-text>
  </mj-column>
  <mj-column width="33.33%">
    <mj-text align="center" font-size="14px">Feature 2</mj-text>
  </mj-column>
  <mj-column width="33.33%">
    <mj-text align="center" font-size="14px">Feature 3</mj-text>
  </mj-column>
</mj-section>

Columns automatically stack on mobile devices for optimal readability.

How to add social media and footer elements?

Complete your emails with social links and professional footers:

<!-- Social Media Section -->
<mj-section background-color="#2e3440" padding="20px">
  <mj-column>
    <mj-text color="white" align="center" font-size="18px">
      Follow Us
    </mj-text>
    <mj-social font-size="15px" icon-size="30px" mode="horizontal">
      <mj-social-element name="facebook" href="https://facebook.com/yourpage">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://twitter.com/yourhandle">
      </mj-social-element>
      <mj-social-element name="instagram" href="https://instagram.com/yourprofile">
      </mj-social-element>
      <mj-social-element name="linkedin" href="https://linkedin.com/company/yourcompany">
      </mj-social-element>
    </mj-social>
  </mj-column>
</mj-section>

<!-- Footer Section -->
<mj-section background-color="#f8f9fa" padding="20px">
  <mj-column>
    <mj-text font-size="12px" color="#6c757d" align="center">
      © 2025 Your Company Name. All rights reserved.
    </mj-text>
    <mj-text font-size="12px" color="#6c757d" align="center">
      123 Main Street, City, State 12345
    </mj-text>
    <mj-text font-size="12px" color="#6c757d" align="center">
      <a href="#" style="color: #007bff; text-decoration: none;">Unsubscribe</a> | 
      <a href="#" style="color: #007bff; text-decoration: none;">Privacy Policy</a>
    </mj-text>
  </mj-column>
</mj-section>

This creates professional social media links and footer with compliance links.

How to customize styles and use advanced MJML features?

Leverage advanced MJML features for professional email design:

<mj-head>
  <!-- Custom CSS -->
  <mj-style>
    .custom-class {
      background: linear-gradient(45deg, #007bff, #6610f2);
    }
  </mj-style>
  
  <!-- Global Attributes -->
  <mj-attributes>
    <mj-button font-family="Arial, sans-serif" border-radius="8px" />
    <mj-text line-height="1.6" />
  </mj-attributes>
</mj-head>

<mj-body>
  <!-- Divider -->
  <mj-section>
    <mj-column>
      <mj-divider border-color="#007bff" border-width="2px" />
    </mj-column>
  </mj-section>
  
  <!-- Spacer -->
  <mj-section>
    <mj-column>
      <mj-spacer height="50px" />
    </mj-column>
  </mj-section>
  
  <!-- Custom styled section -->
  <mj-section css-class="custom-class" padding="40px">
    <mj-column>
      <mj-text color="white" font-size="24px" align="center">
        Custom Gradient Background
      </mj-text>
    </mj-column>
  </mj-section>
</mj-body>

Use these advanced features to create unique, branded email experiences.

What MJML version and limitations apply?

Our MJML editor runs MJML 4.15+ with specific constraints:

Version & Environment:

MJML 4.15+ email templating language
Browser-based compilation to HTML
Memory limit: ~100MB for complex layouts

Key Limitations:

No external file references (use CDN links)
No server-side integrations
No email sending capabilities
No custom MJML component development
Images must use data URLs or external CDN links

Available Features:

<!-- All standard MJML components -->
<mj-body>, <mj-section>, <mj-column>
<mj-text>, <mj-button>, <mj-image>
<mj-divider>, <mj-spacer>, <mj-navbar>
<mj-social>, <mj-wrapper>, <mj-hero>
<!-- Real-time preview available -->

Focus on responsive email template design and cross-client compatibility.

Where can I learn more about MJML?

Explore these official resources and learning materials:

Official Documentation:

MJML Documentation - Complete MJML reference
MJML GitHub Repository - Source code and examples
MJML Components - All available components
MJML CLI Documentation - Command line tools

Email Development Resources:

Email Client Support - HTML/CSS compatibility across email clients
Email Design Patterns - Best practices and patterns
Responsive Email Design - Mobile-friendly techniques
Email Accessibility - Accessible email design

Tools & Testing:

Litmus Email Testing - Cross-client email testing
Email on Acid - Email testing and analytics
MJML Slack Community - Community support

These resources cover everything from basic MJML syntax to advanced email development!