How to: using editable 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, and button text:

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

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

<mj-text css-class="edit-text">Content 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>

HTML attributes

In order to use the data-block attribute for storing content, you can use the mj-html-attribute tag in your mj-head. For it to output in your body, you will need to associate each attribute with a specific css-class.

<mj-head>
  <mj-html-attributes>
    <mj-selector path=".feature-title div">
      <mj-html-attribute name="data-block">feature-title</mj-html-attribute>
    </mj-selector>
  </mj-html-attributes>
</mj-head>

<mj-text css-class="edit-text feature-title">Content text</mj-text>

Components and regions

Add the following global CSS classes:

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

Then use edit-component, edit-region, and edit-remove classes on MJML areas that you want to add component or region options for:

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

Sections

For block-section containers use the mj-raw element in order to include the data-group attribute:

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

Preview text

Just add this global CSS class for preview text:

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

Navigation

If you use the mj-navbar tag, add this to your global CSS classes:

.edit-nav a {
  -block-edit: true;
}

Then use the edit-nav class on the MJML tag:

<mj-navbar base-url="#" hamburger="hamburger" css-class="edit-nav">
  <mj-navbar-link href="#">Nav item 1</mj-navbar-link>
</mj-navbar>

Background images

One Blocks Edit option that at this point doesn't seem doable within MJML natively is background images, primarily because of the additional required Outlook code. The way around this is to either add editable tags after compiling your MJML code, or copy the compiled portion of HTML for your background image and paste it to use in your MJML, wrapped with the mj-raw tag. Then add in the needed editable tags.

If you have any questions regarding implementation with your MJML code or with using Blocks Edit editable tags, you can reach out to support.

Lean Design Blog