Edit your emails in code mode

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:

Some basics of MJML coding
how to enter the code mode in Friendly Automate
and how to make specific adjustments to the code there

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:

section: <mj-section>
column: <mj-column>
image: <mj-image>
Text: <mj-text>
button: <mj-button>
social media element: <mj-social>

💡

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.

Modify your email in code mode

Example: Display columns side by side on smartphones

One of the major advantages of MJML is that your emails are displayed responsively. If you create a section with two columns, these columns will be automatically displayed one below the other on a smartphone.

Here you can see a section with two columns displayed in the Email Editor:

If you select the view for mobile devices in the upper left corner, the columns are automatically placed below one another:

Suppose you want instead to display these columns side by side on a smartphone. MJML provides this possibility with the <mj-group> component (see the MJML documentation). You can't include <mj-group> from the email editor's graphical interface, but you can easily do so in code mode.

First open your email in the email editor. If you need help with this, visit this tutorial. Then click on the code mode icon in the top right corner:

This will take you to the code view. Find the columns that you want to group:

Add the tag <mj-group> above the first column and close the tag below the second column with </mj-group>:

Save your changes by clicking the "Save" button.

💡

Note: Due to a bug in Friendly Automate 4, changes you have made in code mode are initially not displayed on the graphical user interface, or other elements suddenly "disappear". However, everything is saved. The email will be displayed correctly again if you follow these steps:

Close the email by clicking on the cross at the top right.
Now click on "Save & Close" in the upper right corner.
Click on "Edit" in the upper right corner, then click on "Builder". You are back in the email editor and the email should be displayed correctly.

If you open the email on a smartphone now, the columns won't show like this...

… but like this:

💡

Note: Since the email editor does not support this feature on the graphical interface, the columns are still displayed one below the other in the mobile preview. However, the code is saved and will be taken into account when sending the email.

This way you can easily make extensive modifications to your emails in code mode.

Do you have any questions? We are happy to help you via 📧 email, ☎️ phone and 👩‍💻 video calls.

Click here to go back to the main help page:

Friendly Automate