Template Best Practices

Following these best practices will help you create templates that are easy for your team to edit, while keeping layouts safe from accidental breaking changes.

1. Keep Editable Regions Small and Targeted

Avoid making large, complex HTML blocks editable. Instead of making an entire table cell with multiple elements editable, target the specific <p>, <h1>, <a>, or <img> tags inside it.

Good: Specific tags are editable.

<td>
  <h1 mm-editable data-mm-label="Headline">Title</h1>
  <p mm-editable data-mm-label="Sub-text">Some text.</p>
</td>

Risky: The entire container is editable. This can lead to users accidentally deleting or changing the HTML structure.

<td mm-editable data-mm-label="Content">
  <h1>Title</h1>
  <p>Some text.</p>
</td>

If the contains only text or simple content without additional wrappers, applying mm-editable to the is acceptable.

2. Lock Down the Layout

The primary goal of Modular Mail is to separate content from structure. Your HTML template defines the structure. The mm-editable tags define the content.

3. Use data-mm-label Everywhere

Always give your editable regions and modules a clear, human-readable label. This is the single most important thing you can do to make your templates easy to use. A user will see “Hero Image” in the editor, not <img>.

4. Be Specific with data-mm-type

While the editor can infer types, being explicit with data-mm-type ensures the correct editing UI is always presented to the user. Use data-mm-type="button" for call-to-action links and data-mm-type="rich-text" for complex content blocks.