Build Better Blog

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

Make your branded emails editable

Blocks Edit is an editor for your custom email campaigns. Build and edit without having to worry about the code.
See how it works and try it out free →