The Pros and Cons of MJML

While email marketing still remains one of the most effective ways to reach customers, designing HTML emails that look great on all devices and browsers can be a daunting task. Fortunately, in the last few years, MJML has swooped in and changed the game. MJML is a markup language that makes it easy to design beautiful, responsive emails. It’s simple to learn, easy to use, and it’s quickly becoming one of the top go-to tools for email marketing. But if you’re still weighing the usefulness of MJML, here are some pros and cons to help you decide if it’s the right markup language for you.

What are the pros of using MJML?

1. It’s easy to get started with MJML
   
   The idea of learning a new markup language may seem somewhat intimidating or at least time-consuming, especially for those who have never tried coding, but MJML is extremely easy to learn. In fact, it’s so easy that you can likely pick it up in under an hour as a total beginner or in even less time if you’re already familiar with HTML. This is because MJML uses very simple syntax and the documentation isn’t overly technical, making it straightforward for those who just want to start coding their first email right away. For example, if you want to create a button in MJML, you would use the component <mj-button>, specify your text, fonts, and colors with some inline CSS, if necessary, and you’re done. You can even generate social media icons for the most popular platforms when you use the <mj-social> and <mj-social-element> components. If you’re interested in a step-by-step tutorial on building a complete email in MJML, check out one of our previous blog posts.

2. Saves time

MJML being easy to use goes hand in hand with the language being a huge time saver. Coding emails with HTML can unfortunately involve a lot of complications, and using HTML alone to code emails will require extra work  for styling and responsiveness. Since external CSS and JavaScript don’t work in most clients, you may find yourself writing a lot of HTML code just to create something simple—if you’ve ever tried to code an email with just HTML, you already know how crazy nesting tables can get. Naturally, the more code you have, the more likely things are to get a little messy, which leaves the door open for silly mistakes to be made. With MJML, however, you can avoid many of the pitfalls that come with HTML email coding. MJML was created to provide responsive email design, which means less complicated code, and MJML is constantly updated to keep up with the latest email client changes.

1. Excellent documentation

Nothing is worse than trying to learn a new programming language without the proper tools or guide. Fortunately, Mailjet, the creator of MJML, went to great lengths to ensure the most important aspects of coding are covered. On the official MJML website, you can find a detailed guide on how to create basic email elements, like sections, buttons, and images, as well as community components. The latter is put together by other MJML users who have contributed to the MJML framework. Some of these contributions include code for creating charts or QR codes and new community components are constantly being added. We also explain many of the MJML components in-depth in our MJML cheatsheet.

1. MJML is open source

This means that MJML has been specifically designed to be accessed, modified, and distributed by anyone for any purpose. This collaborative model allows people from all over to use their expertise and creativity to consistently improve MJML, helping both new and experienced users benefit. MJML has a standard collection of components, but as mentioned previously, users can create their own components and share them with the wider community. You’ll find step-by-step instructions here on how to make your own custom components when you’re ready.

5. There are multiple ways to use MJML

When it comes to actually coding with MJML, you’re not constrained to any one platform. Here are a few ways that you can use or install MJML:

• https://mjml.io/try-it-live - Using MJML’s online editor, you can code directly within your browser.
• Download the MJML app – this is a desktop app, so you’ll be able to use it without internet access and it comes with a live preview function.
• Node.js – For those a little more experienced with web development, you can install MJML using npm.
• Atom Plugin – Includes error-spotting and a live preview feature like the MJML app.
• Visual Studio Code plugin – Ability to send emails with Nodemailer or Mailjet.
• Sublime Text Plugin – Simply highlights MJML code.
• Gulp plugin - Allows you to use your engine to render HTML if you have custom components linked.
• Check out the MJML community page for more useful tools, libraries, and plugins.

We've built Cannoli

Cannoli streamlines your workflow by converting Figma frames into email-ready code. Just submit your Figma URL and frame, and Cannoli will do the coding for you. Edit easily, add links, alt text, or change text in our web app.

Cannoli generates responsive code. It uses MJML, a language specifically created to code emails, and follows its guidelines for responsive code. With MJML, you can specify breakpoints and choose if your columns should stack or not. Responsive HTML is also automatically generated, so no need to worry about that!

Watch our video and discover more now!

What are the cons of using MJML?

1. The syntax may be too simple

Don’t get it wrong, there’s a lot you can do with MJML, but it does have its limitations. MJML was launched by Mailjet in 2016 so it’s still a fairly new language and, as a result, still has some kinks to work out. For example, you may run into issues with background images not rendering properly on all email clients. MJML is also known to be problematic at times on Outlook. Responsiveness when it comes may get somewhat complicated if you want specific behaviors on mobile since MJML adds CSS classes by default, so you would need to override the unnecessary properties.

2. HTML conversion can get messy

Although MJML does a great job of creating responsive HTML code, sometimes that code isn’t 100% clean and you may find yourself having to add in or remove certain elements. The converted HTML code can also be quite complex, so if you’re not very familiar with HTML or CSS, a seemingly small change can result in pesky errors. Since it currently isn’t possible to convert HTML code to MJML, you’ll want to make any structural changes, such as adding new sections, to your email in the original MJML file instead of the HTML.

3. Large file sizes

MJML code itself is fairly compact, but once it’s converted to HTML you’ll see just how much code is packed in. The amount of code is often necessary in order to make the code render properly with as many email clients as possible. Some clients will cut off an email if the size is too big. Gmail, for example, has a limit of 102kb. Recipients can still click to view the rest of the email in a browser, but there is a workaround to this problem—you can minify the code. Minification is exactly what it sounds like—it minimizes the amount of code, and as a result, decreases the file size. When you use the MJML online editor and select “minify HTML”, MJML will shrink the HTML output code. Even if you don’t use the online editor, you can always use a plugin minifier.

Conclusion

MJML offers some clear pros and cons, but it’s safe to say that the good far outweighs the bad. Overall, MJML is easy to use, saves time and energy, and looks great on almost any email client, so we would recommend that you give it a try if you haven’t already.

If you need more clarification or help with your MJML code, our team is always happy to help—just email us at hello@scalero.io.

But if you’d like to transform your Figma designs into email code effortlessly, Cannoli is a game-changer. Create outstanding email templates! Check what our app can do for you.