MJML

Description #

MJML (Mailjet Markup Language) is a responsive email markup language that abstracts away the complexity of HTML email design and generates clean, responsive code compatible with major email clients.

History #

MJML was developed and released by Mailjet in 2016 to simplify the process of creating responsive email templates. Its component-based syntax makes email design approachable for developers and marketers alike.

Hello World Code #

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello, World!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

How to Run #

Option 1: Online
Try the MJML live editor:
https://mjml.io/try-it-live

Option 2: Local
Install via npm:

npm install -g mjml

Then run:

mjml hello.mjml -o hello.html

Key Concepts #

• High-level markup for responsive emails
• Component-based syntax (<mj-text>, <mj-button>, etc.)
• Automatically outputs clean HTML/CSS
• Built-in mobile responsiveness
• Compatible with all major email clients
• Can be integrated into CI pipelines
• Useful for marketing, onboarding, and notification emails
• Easily styled with inline CSS or MJML attributes
• Open-source with active community
• Often used with tools like Mailjet, SendGrid, and Mailchimp

Try It Online #

https://mjml.io/try-it-live

Fun Facts #

• MJML stands for Mailjet Markup Language.
• Its output HTML is tested against more than 30 email clients.
• Major companies use MJML to power email systems at scale, including Nike and Airbnb.

Resources #

Official site
Docs or tutorial
GitHub or interpreter
Community or learning resources