How-to: Using Blocks Edit tags in MJML email templates

If you use MJML to code your email templates, here's how to add Blocks Edit editable tags to your MJML template code.

How-to: Using Blocks Edit tags in MJML email templates

If you use MJML to develop your email templates, this guide will show you how you can add Blocks Edit editable tags to your template, directly within the MJML code. That way, you can use your compiled code as an editable BE template and more easily make updates to your template without worrying about redoing your BE tags each time.

Text and images

Add the following global CSS classes that will be used for text, images, button text, and navigation labels:

.edit-text img, .edit-image div, .edit-button a, .edit-nav a {
  -block-edit: true;
}

Then use edit-text, edit-image, edit-button, and edit-nav classes on MJML elements you want to add editable options to, like so:

<mj-text css-class="edit-text">Headline text</mj-text> <mj-image css-class="edit-image" src="http://placehold.it/600x450" href="#" alt="Banner"></mj-image> <mj-button css-class="edit-button" href="#">Call to Action</mj-button> <mj-navbar base-url="#" hamburger="hamburger" css-class="edit-nav">
  <mj-navbar-link href="#">Nav item 1</mj-navbar-link>
</mj-navbar>

Sections

For block-section areas, and for containers with data-group attributes, use the mj-raw element:

<mj-raw><div class="block-section" data-group="basic"></mj-raw>
...
<mj-raw></div></mj-raw>

Regions and components

Add the following global CSS class for block-region (and block-remove):

.edit-region < tr {
  -block-region: true;
}
.edit-remove < tr {
  -block-remove: true;
}

Then use edit-region and edit-remove classes on MJML mj-image, mj-text, mj-button, or other MJML components that you want to add region options for:

<mj-button css-class="edit-region edit-remove" href="#">Call to Action</mj-button>

Preview text

Just add this global CSS class for preview text:

body > div:first-child {
  -block-preview: true;
}

Limitations

There are a couple of Blocks Edit options that at this point don't seem doable within MJML and would need to be added after compiling your MJML code: background images, primarily because of the additional Outlook code; and, stored content which requires the data-block attribute.

Example template

Last month we released a new version of our Starter Email Template which we've open-sourced the code for on GitHub. We built the template using MJML and have included the MJML source code as part of the repo. It uses all of the techniques above in several different ways that you can refer to and see how it all works in practice.

If you have any questions regarding implementation with your MJML code or with BE tags implementation in general, you can reach out for Support. We also update our tags docs pretty regularly with new functionality details and code examples.

Photo of Ovi Demetrian Jr By Ovi Demetrian Jr

Share the blog

Tweet | LinkedIn post | Facebook post | Email a team member

Get updates sent to you

Blog posts are included in our monthly newsletter along with additional design and content production articles and resources Subscribe →