If you want to add code to your emails that is not available in the Email Builder, you can use the code mode to edit the MJML code directly. This way you have full access to all MJML functionalities.

In this tutorial you will learn:

Basics of MJML coding

You can find out why we use MJML instead of HTML on this page:

Email formats: MJML vs. HTML

In a nutshell: MJML is an open source markup language designed to display content correctly (and especially responsively) in all email clients. MJML is only used in the background: Before the email is sent, it is converted into responsive HTML.

MJML saves you a lot of work, because the MJML components are layout containers that allow for simple coding that is automatically translated into a complex HTML layout afterwards. You can learn about the basic structure of the MJML layout in our email editor tutorial.

If you want to work with MJML at the code level, you can use the official MJML documentation to learn about the possible components and their attributes. Some of the most important MJML components are:

<aside> 💡 It is important to note: MJML also includes HTML code, namely within the MJML text element <mj-text>. Inside <mj-text> any HTML element with all matching attributes is possible. If you need resources for this, you can find an HTML documentation here.

</aside>

Modify your email in code mode