Everything you need to know about MJML

While MJML is one of the easiest markup languages for beginners to pick up, there are still certain aspects of it that you may find yourself curious about. For example, you may want to know more about what your options are when it comes to how to install MJML or even how to open an MJML file. That’s why we’re here to answer some frequently asked MJML questions and provide more insight into the intricacies of getting started with MJML.

What is the difference between MJML and HTML?

As far as what they have in common, HTML and MJML are both markup languages that can be used to create beautiful designs, but they still have some key differences. HTML is the primary language used for structuring content all across the internet, whether that be for websites, phone apps, or emails. MJML, on the other hand, is a framework specifically for responsive email design. 

Trying to code an email with HTML can be a major pain at times because most email clients don’t all follow the same rules, which can result in your emails looking different, strange, or completely unreadable across multiple clients. 

HTML also tends to require much more code compared to MJML, so the amount of time you spend coding will be much longer and the chances of making mistakes are even higher with HTML. This is because most email clients don’t properly render CSS or JavaScript. As a result, you may have to jump through more hoops code-wise to make your emails look good and function properly using HTML primarily. 

However, MJML simplifies the language of email creation, allowing you to use less code and produce HTML code that is responsive with most email clients.

What is MJML Framework?

You’ll see the word “framework” get tossed around often when defining what MJML is, but what does it actually mean in basic terms? It’s basically a collection of pre-built components that can be used to create emails. In MJML, the primary components you’d use are known as head components and body components. 

Each of these framework components is designed to create responsive HTML code. As you learn to code with MJML, you’ll quickly notice that many of the head and body components used are quite similar to those in traditional HTML and CSS.

Is MJML open-source?

Yes, and this essentially means that the MJML framework has been developed to rely on peer review and community collaboration. Since MJML is open-source, the wider community of MJML users can contribute to improving the framework and creating solutions to new challenges as they come up. The benefit of this is that you can use MJML to create HTML emails, but you can also use it within a larger application of your choice and share your own discoveries with the rest of the MJML community along the way.

How do I install MJML on Linux?

You can install MJML on Linux by using npm. You have 2 options:

• NodeSource installer is most recommended
• You can also use one of the installers on the Node.js download page

To install MJML for other systems, such as OSX and Windows, or to find plugins for editors you already use, take a look at MJML’s official download page here.

How do I open MJML files?

Opening an MJML file is similar to opening an HTML file, but you may have to go through a couple extra steps. 

If you just want to see the code, the simplest and quickest way is to download the MJML file onto your computer, copy the file path, and paste it into a browser, like Google Chrome, then hit “enter”. From there, you should see all the MJML code generated. However, if you want to see the email design, you have a few choices:

• You can copy and paste the code into MJML’s own online editor
• Upload the file to the MJML app once you’ve downloaded it onto your computer
• Install MJML onto your computer using node.js and npm and open the file within the code editor you already use
• Download a code editor like Atom, Visual Studio Code, or Sublime Text and use their plugins: 
  • For Atom, the language-miml plugin will allow you to view the code and the mj-preview plugin will allow you to see the design as you’re editing (just click save to see the changes). 
  • Visual Studio Code’s plugin allows you to do much of the same and more. 
  • For Sublime Text, use their MJML-syntax plugin.

How do I convert MJML to HTML?

You can use miml.io’s online editor to export your MJML to HTML. If you’re already editing within the editor, simply click “View HTML”. This will give you a side-by-side view of both your MJML and newly-generated HTML code. From there, copy the code.

A second but similar option is to use the MJML App. Once you have the file open in the app, in the upper righthand corner, you should see a “Copy HTML” button. This will only copy the code so that you can paste it elsewhere, but if you want to export an HTML file, click the down arrow next to “Copy HTML” and you’ll see an option to export to your computer.

The third method, which works if you’re using npm, is to run a terminal command in the Node.js command prompt.

In the terminal, locate the folder that is currently holding the mjml file. For example:

cd ~/Desktop/MJML-Template>

Then use the following command to convert:

mjml -r my-email.mjml -o my-email.html

After doing this, a new file should appear in the same folder as an HTML file. From there, you’ll be able to view the email design in Chrome, open the file in your text editor to access and copy the code, or upload the file to your email marketing platform.

Can I convert HTML to MJML?

It’s likely not impossible, but there aren’t any known tools that can do this. In most cases, it shouldn’t be necessary since MJML is primarily used as a tool to easily create HTML code.

Does Mailchimp support MJML?

Mailchimp does not currently support MJML or allow you to upload MJML files to their code editor. But the fix is still simple. Just convert your MJML code to HTML as we discussed above and you’ll be able to upload the HTML file or copy and paste the HTML code.

How do you use MJML in React?

Start by using npm and then install the mjml-react npm package. The package provides React bindings for MJML.

Where can I find an MJML tutorial?

If you’re looking for a step-by-step guide on how to code your first email with MJML, check out one of our previous blog posts. We also have an MJML cheatsheet that’s full of the most common snippets of code that are used to build emails with MJML. 

Where can I get help with MJML?

If you’re having trouble with your MJML code or just looking for a little more guidance, reach out to us at support@scalero.io. Our team is very knowledgeable about all things MJML, so we’ll be able to point you in the right direction.

Need help with any other aspects of email design? At Scalero, we specialize in various areas of email creation, including creating templates, building email campaigns, using Figma, and so much more. We can even code entire email templates for you that are completely customizable. To get started, just reach out to us here!