MJML Email Editor

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.

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.

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.

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.

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.

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.

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.

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!