MJML examples to get you started

Whether you’re a beginner when it comes to coding or you’re already quite familiar with HTML, MJML is one of the easiest markup languages to learn. If you’re looking for a straightforward cheat sheet with examples of the most common pieces of MJML code you’ll need, this post is for you. Be sure to also check out our guide on how to build an email from scratch using MJML for even more tips.

How to Install MJML

Here are a few options:

• https://mjml.io/try-it-live - This is probably the simplest way to use MJML, because you can code directly inside your browser.

• Download the MJML app – this is basically an MJML desktop app, so you’ll be able to use it without internet access and it comes with a live preview function.

• Atom Plugin – If you already use the app Atom to code HTML, you can use this MJML Github bundle as an add-on. It includes error-spotting and a live preview feature like the MJML app.

• Visual Studio Code plugin – This plugin has all the features from the options above, including the ability to send emails with Nodemailer or Mailjet.

• Sublime Text Plugin – Simply highlights MJML code.

• Node.js – For those a little more experienced with web development, you can install MJML using npm.

Scalero also supports MJML so our users have access to it when creating templates.

How to Start Coding MJML

Below is the foundational layout for your MJML code. As you build out your email, you’ll slowly nest more and more components within these starter tags.

<mjml>
  <mj-head>

  </mj-head>
  <mj-body>

  </mj-body>
</mjml>

Standard MJML Head Components

MJML components in the head tag may not all be visible within your email, but they’re just as crucial as your body elements. Let’s go over a few of the most important ones.

MJML Attributes and All

In MJML, <mj-attributes> enables you to assign default values for all the listed components under the tag. For example, in the code, you can see that we've made all the padding for our text “0”.

You can use <mj-all> to apply an attribute to all components. Notice in the code below that because we assigned “Arial” as the font-family, all text in the email will automatically be Arial font. However, you can later override <mj-all> by adding a different font-family attribute to <mj-text>, such as font-family=“Times”.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text padding="0" />
      <mj-class name="blue" color: #2a72d5 !important; />
      <mj-class name="big" font-size="20px" />
      <mj-all font-family="Arial" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text mj-class="blue big">
          This text is in Arial font.
        </mj-text>
        <mj-text mj-class="blue big" font-family="Times">
          This text is in Times font.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

You may be wondering what the main difference between <mj-attributes> and <mj-all> is. They’re pretty much the same, except that <mj-all> affects all MJML components using just the one tag instead of a list of tags nested within it.

Classes

When it comes to MJML classes, using <mj-class> allows you to name and assign a value to a group of attributes to manipulate components. To apply them, use mj-class="<name>". You can give the class any name you want but the value you assign to it will need to be an actual styling attribute. In the code above, since we wanted to make our text blue, we gave it the name “blue” and used the styling attribute color=”blue”. We also did the same with the font size. Then, in the body section, using mj-class, you can simply input the names of the classes to see the effects.

Styles

<mj-style> lets you define CSS styles for the HTML in your code, similarly to how you would with internal CSS. In our example, we created the class .blue-text with styling attributes to underline and color the text blue.

<mjml>
  <mj-head>
    <mj-style>
      .blue-text div {
      color: blue !important;
      text-decoration: underline !important;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="blue-text">I'm blue and underlined</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Breakpoints

<mj-breakpoint> lets you control at which point your layout should switch from desktop to mobile view.

<mjml>
  <mj-head>
    <mj-breakpoint width="320px" />
  </mj-head>

Preview Text/Preheader Text

In MJML, you can customize your preview text (that is, the text under your email subject line) using <mj-preview>.

<mjml>
  <mj-head>
    <mj-preview>Hello, Friend</mj-preview>
  </mj-head>

Fonts

<mj-font> allows you to import fonts in MJML, which is helpful if you want to use a custom font in your emails. You can use a source like https://fonts.google.com/ to access hundreds of fonts and just include the URL in the code. The only caveat is that custom fonts don’t always work with major email clients, including Gmail, surprisingly. Check out one of our previous blog posts to learn more about how to pick the best email-safe fonts.