MJML examples to get you started

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.

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”.

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.

Breakpoints

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

Preview Text/Preheader Text

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

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.

Standard MJML Body Components

Now we move into MJML body components, which will be responsible for creating the visible content in your emails. Let’s start by understanding how to give your design some basic organization.

Sections and Columns

MJML Sections behave like rows in an email and are used to give structure to your layout. Columns, on the other hand, allow you to organize your layout horizontally. It’s important to nest the <mj-column> tag within the <mj-section> tag in order for it to work, but columns can’t be nested within columns and neither can sections.

Groups

<mj-group> comes in handy when you want to keep MJML columns from stacking in mobile. When you use this component, your columns will stay side-by-side on both desktop and mobile. Also be aware that if you need to set a width for your columns on desktop, you should use percentages instead of pixels so that the columns adapt to the viewport of the browser in use.

Dividers

<mj-divider> allows you to create a horizontal line as a divider. It can also be customized, similarly to a divider in HTML. For example, you can control the thickness of the border using the attribute “border-width”; you can control whether the divider is solid, dotted, or dashed with “border-style”; and you can change the color using “border-color”.

Text

Much like with HTML, inserting text in MJML is simple. Just use <mj-text>. If you want to control the size, use the attribute font-size; to change the color, use the color attribute; to capitalize, uppercase, or lowercase the text, use text-transform.

Buttons

<mj-button> lets you create and customize buttons in MJML, with the aid of style attributes. For example, you can control the font of your button text, the color of the text, and the color of the button itself.

Images

Create images in MJML and control their size by using the <mj-image> tag.

Spacers

<mj-spacer> lets you control the amount of space between two components, such as text. However, if you want to start another line of text (a line break), you can just use the <br> tag as you would in HTML.

Tables

Creating tables in MJML is also similar to creating them in HTML. Start with the <mj-table> tag and use <tr>,<th>, and <td> tags to make the columns and rows. You can also style the tables to your liking.

Navigation Bar

Use the <mj-navbar> tag to include a navigation bar in your emails. If your navigation links all stem from the same site, consider using the base-url attribute within the <mj-navbar> tag first for your primary domain name (in our example, it’s scalero.io). Then, when creating the navigation bar links, simply use the URL slugs (the part that comes after the domain name) within the <mj-navbar-link> tags.

Social Media Icons

Putting social media icons in your emails is made easy with the <mj-social> tag. You don’t have to fetch an image of the social media icons because MJML does it for you. Just name the platform you want to link to by using the <mj-social-element> tag (for example, linkedin), provide the link to your social media profile page, and you’re good to go. 

Wrappers

MJML wrappers allow you to wrap multiple sections together with <mj-wrapper>. It’s primarily helpful for creating nested layouts that have shared borders or background images across sections.

Conclusion

As you can see, MJML allows a lot of flexibility and ease-of-use when it comes to coding and design, making it simple for almost anyone to start creating their own emails. But if you’re still looking for some extra guidance, reach out to us! We can answer any questions you have about email design and even code custom emails for you. 

We got your back!

Cannoli is the tool for you if you like creating emails in Figma and want to turn your designs into MJML or HTML in seconds. Design in Figma, convert with Cannoli – no coding hassle. Edit emails easily using Cannoli's intuitive code editor. Automatic image optimization for sharp, smooth delivery.

Want us to take care of the process?

Our Cannoli Service team will deliver production-ready email code tested on the most current devices and email clients. Place your order, complete your payment, sit back and relax!

Ready to get started? Order now.