MJML examples to get you started
Kristina Lauren
September 14, 2023
If you’ve ever coded an HTML email, you know how painful it can be. Unlike building for the web, email requires outdated table-based layouts, endless inline styles, and constant hacks just to make a design render consistently across Gmail, Outlook, and Apple Mail. That’s exactly why MJML (Mailjet Markup Language) was created: to make responsive email coding faster, cleaner, and far less frustrating.
In this post, we’ll give you a straightforward cheat sheet with examples of the most common MJML components you’ll actually use day to day. Whether you’re brand new to coding or already comfortable with HTML, you’ll see how MJML can simplify your workflow and save you hours of troubleshooting.
👉 If you’d like a deeper primer before diving into examples, check out our guide to starting with MJML emails.
What is MJML (and why it exists)
If you’ve ever tried coding an HTML email, you know it’s not like building a web page. Email clients don’t play by modern web standards: most still rely on 1990s-era table layouts, inline styles, and endless hacks to make designs look consistent across Gmail, Outlook, Apple Mail, and others. Even a “simple” button can turn into 20+ lines of clunky HTML.
That’s why MJML (Mailjet Markup Language) was created in 2015 by the team at Mailjet. It’s an open-source framework designed to take the pain out of email coding. Instead of hand-writing all that messy table-based HTML, you write clean, readable tags like <mj-section>, <mj-column>, and <mj-button>. Then MJML compiles it into responsive HTML that just works across email clients.
Why MJML is valuable
Saves time: You write a fraction of the code, MJML handles the ugly parts.
Responsive by default: Your emails adapt beautifully to mobile and desktop without extra effort.
Cross-client consistency: MJML generates bulletproof HTML that plays nicely with even the most stubborn email clients.
Component-based: Need a button, image, or social share block? Drop in the MJML tag, not much extra coding required from there.
How to use MJML
One important thing to know: you don’t actually send MJML code to your ESP. ESPs (Customer.io, Iterable, Klaviyo, etc.) only accept HTML. MJML is a source language. You write in MJML, and then a compiler converts it into the responsive HTML that your ESP can send.
The good news: you’ve got plenty of options for doing that conversion, from quick browser tools to more advanced local setups.
Tools for compiling MJML
MJML Live Editor – The simplest way to try MJML. Just open your browser, type MJML, and see the compiled HTML instantly.
MJML App – A desktop app with live preview that works even offline.
Code Editor Plugins
Atom – Includes error-spotting and live preview.
Visual Studio Code – Full-featured plugin with preview and extras like sending emails via Nodemailer or Mailjet.
Sublime Text – Adds MJML syntax highlighting.
Node.js / npm – For developers who want MJML available from the command line.
Scalero – We have two platforms that supports MJML directly, so you can build, edit, and send without worrying about separate compilers:
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.
Styling in MJML
MJML gives you two different ways to handle styling:
Using
mj-style(traditional CSS)Lets you write raw CSS inside
<mj-head>, just like you would in a<style>tag on a webpage.Great for developers who are already comfortable with CSS or want precise control.
Using
mj-class(MJML shorthand)Lets you define a reusable set of MJML attributes and apply them to multiple components.
Instead of writing full CSS selectors, you assign an
mj-classname and reuse it across components.
👉 Think of it this way:
mj-style= pure CSS, traditional and flexible.mj-class= MJML’s own shortcut for grouping attributes so you don’t repeat yourself.
Breakpoints
Use <mj-breakpoint> to control when your email switches from desktop to mobile layout. By default, MJML uses 480px, but you can customize it:
Preview (Preheader) text
The <mj-preview> tag sets the preview text (the snippet shown under the subject line in most inboxes). Place it in the <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.
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
Display 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 works much like in HTML. Start with the <mj-table> tag and use <tr>, <th>, and <td> to build your rows and columns. You can also add inline styles or attributes to customize the table’s appearance.
Navigation bar
Use the <mj-navbar> tag to add a navigation bar to your emails. If your links share the same domain, you can set a base-url attribute on <mj-navbar> (for example, scalero.io). Then, when adding links with <mj-navbar-link>, you only need to include the URL slugs (the part that comes after the domain).
Social media icons
Adding social media icons is simple with the <mj-social> tag. You don’t need to source or host the icons yourself—MJML provides them. Just use <mj-social-element> (e.g., "linkedin") and include the link to your profile.
Wrappers
The <mj-wrapper> tag lets you group multiple sections together. It’s especially useful for creating nested layouts that share the same background color, background image, or borders across several sections.
Putting together some of these components
To wrap things up, here’s a full MJML example that combines many of the concepts from this post, like breakpoints, preview text, reusable classes, a navbar, wrappers, tables, and social icons, all into one working template. You can use it as a reference or a starting point for building your own production-ready emails.
Conclusion
MJML takes the pain out of email development, making it faster and easier to build responsive, reliable designs. With just a few tags, you can create layouts that would normally require dozens of lines of old-school HTML.
If you’d like some extra guidance, or need help coding production-ready emails, feel free to contact us. We’re happy to help.
