Skip to content

Writing Emails

MailJawn uses MJML to create emails that look great on every device — phones, tablets, and desktops. You don't need to be a developer to use it. If you can write a few simple tags, you can build professional emails.

What Is MJML?

MJML is an email markup language created by Mailjet. You write simple tags like <mj-text> and <mj-image>, and MJML converts them into the complicated HTML that email clients require. This means you get responsive, well-tested emails without wrestling with table layouts and inline styles.

Tip

Think of MJML like writing a recipe — you describe what you want (a heading, a paragraph, an image), and MJML handles the formatting for you.

Basic Structure

Every MJML email follows the same skeleton:

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="Helvetica, Arial, sans-serif" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello, world!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Here's what each piece does:

  • <mjml> — The root tag that wraps everything
  • <mj-head> — Optional settings like default fonts and styles
  • <mj-body> — The visible content of your email
  • <mj-section> — A horizontal row (like a stripe across the email)
  • <mj-column> — A vertical column within a section
  • <mj-text> — A block of text content

Common Components

Text

<mj-text font-size="16px" color="#333333">
  <p>Thanks for downloading Recipe Box!</p>
  <p>Here are some tips to get started...</p>
</mj-text>

You can use standard HTML inside <mj-text> — paragraphs, bold, italic, links, and lists all work as expected.

Images

<mj-image
  src="https://example.com/hero-banner.png"
  alt="Recipe of the week"
  width="600px"
/>

Warning

Always include alt text for accessibility. Some email clients block images by default, so subscribers will see your alt text instead.

Buttons

<mj-button
  background-color="#6B46C1"
  color="#FFFFFF"
  href="https://example.com/upgrade"
>
  Upgrade to Pro
</mj-button>

Dividers

<mj-divider border-color="#EEEEEE" border-width="1px" />

Multi-Column Layouts

Place multiple <mj-column> tags inside a <mj-section> to create side-by-side content:

<mj-section>
  <mj-column>
    <mj-image src="https://example.com/feature1.png" alt="Feature 1" />
    <mj-text>Meal planning</mj-text>
  </mj-column>
  <mj-column>
    <mj-image src="https://example.com/feature2.png" alt="Feature 2" />
    <mj-text>Shopping lists</mj-text>
  </mj-column>
</mj-section>

On mobile, columns automatically stack vertically so everything stays readable.

Styling Your Email

Inline Styles

You can add styles directly to any component:

<mj-text
  font-size="14px"
  line-height="1.6"
  color="#555555"
  padding="20px"
>
  Your content here
</mj-text>

Global Defaults

Set defaults in <mj-head> so you don't repeat yourself:

<mj-head>
  <mj-attributes>
    <mj-all font-family="Georgia, serif" />
    <mj-text font-size="16px" color="#333333" line-height="1.5" />
    <mj-button background-color="#6B46C1" color="#FFFFFF" border-radius="4px" />
  </mj-attributes>
</mj-head>

Background Colors

<mj-section background-color="#F5F0FF">
  <mj-column>
    <mj-text>This section has a light purple background.</mj-text>
  </mj-column>
</mj-section>

Every marketing email must include an unsubscribe link and a physical mailing address (this is required by CAN-SPAM law). MailJawn handles this for you automatically — if your email doesn't include these elements, MailJawn adds a standard footer at send time.

If you'd rather control the footer yourself, include both {{ unsubscribe_url }} and {{ address }} in your template:

<mj-section>
  <mj-column>
    <mj-text font-size="12px" color="#999999" align="center">
      {{ company_name }} · {{ address }}
      <br />
      <a href="{{ unsubscribe_url }}">Unsubscribe</a>
    </mj-text>
  </mj-column>
</mj-section>

When MailJawn detects both variables, it skips the automatic footer and uses yours instead.

Note

See Template Variables for the full list of variables you can use in your emails.

Tips for Better Emails

  • Keep it short. Mobile readers scan quickly. One idea per email works best.
  • Use a clear call to action. A single, prominent button ("Try the new feature", "Read the guide") outperforms multiple competing links.
  • Preview before sending. Use the Preview & Test feature to see your email on different screen sizes.
  • Test your links. Send yourself a test email and click every link to make sure they work.
MJML Resources