Template Best Practices

Follow these best practices to create templates that are easy for your team to edit while keeping layouts safe from accidental changes.

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 mm-label="Headline">Title</h1>
  <p mm-editable mm-label="Sub-text">Some text.</p>
</td>

Risky: The entire container is editable. Users may accidentally delete or change the HTML structure.

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

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

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.

Keep structural elements like tables, rows, and cells outside of editable regions. Only mark the actual content (text, images, links) as editable.

Use mm-label everywhere

Always give your editable regions a clear, human-readable label. This is the most important thing you can do to make your templates easy to use.

Your team will see “Hero Image” in the editor, not <img>. Clear labels reduce confusion and prevent editing mistakes.

<h1 mm-editable mm-label="Main Headline">Your headline here</h1>
<img mm-editable mm-label="Hero Image" src="placeholder.jpg" alt="Hero">

Use mm-type for multi-line content

The mm-type attribute controls which input field appears in the editor.

Type	Use case
`text`	Single-line content like headlines, button text, short descriptions (default)
`textarea`	Multi-line content like paragraphs or longer descriptions

<h1 mm-editable mm-label="Headline" mm-type="text">Title</h1>
<p mm-editable mm-label="Description" mm-type="textarea">Longer paragraph content goes here.</p>

If you don’t specify a type, the editor defaults to text.

Links and images are handled automatically

When you add mm-editable to an <a> or <img> tag, Modular Mail automatically creates the appropriate fields.

Links generate two fields:

URL field for the href attribute
Text field for the link text

<a mm-editable mm-label="CTA Button" href="https://example.com">Shop Now</a>

Images generate two fields:

Source URL field for the src attribute
Alt text field for the alt attribute

<img mm-editable mm-label="Product Image" src="product.jpg" alt="Product description">

Use mm-group to organize related fields in the editor sidebar. This helps editors understand which fields belong together.

Apply the group to a parent element, and all editable children will inherit it.

<table mm-group="Hero Section">
  <tr>
    <td>
      <h1 mm-editable mm-label="Headline">Welcome</h1>
      <p mm-editable mm-label="Subheadline">Your message here</p>
      <a mm-editable mm-label="CTA Button" href="#">Learn More</a>
    </td>
  </tr>
</table>

All three fields will appear under “Hero Section” in the editor.

Use consistent naming conventions

Establish naming patterns for labels and groups across your templates. Consistent naming helps your team work faster.

Recommended patterns:

Use sentence case: “Hero headline” not “HERO HEADLINE”
Be specific: “Primary CTA button” not “Button”
Include context: “Footer logo” not just “Logo”
Keep it brief: “Headline” not “The main headline text for this section”

Test your templates

Before sharing a template with your team:

Create a test campaign using the template
Edit every field to confirm labels are clear
Check the preview at desktop, tablet, and mobile sizes
Export and test in an email client or testing tool

Quick Start Guide for creating your first template
Full Tag Reference for all available attributes