MJML Basics

Learn the fundamentals of MJML for creating responsive marketing messages.

Introduction to MJML

MJML is an open-source markup language designed to simplify the process of creating responsive email templates. It abstracts away the complexity of HTML email development, allowing you to focus on structure and content rather than compatibility issues. MJML automatically generates responsive HTML that works across major email clients.

MJML Structure

An MJML document starts with the <mjml> root tag, containing a <mj-body> section where you define the content. The basic structure looks like this:


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

Common Components

MJML provides a variety of components to build emails, such as:

<mj-section>: Defines a horizontal section.
<mj-column>: Creates a column within a section.
<mj-text>: Adds text content.
<mj-image>: Embeds images.
<mj-button>: Adds call-to-action buttons.

See the MJML documentation for a full list of components and usage examples.

Responsive Design

MJML is built for responsiveness. Its components are designed to adapt to different screen sizes, ensuring your emails look great on both desktop and mobile devices without extra effort.

Best Practices

Use MJML components instead of raw HTML for better compatibility.
Keep your structure simple and avoid deeply nested elements.
Refer to the official MJML documentation for advanced features and troubleshooting.