Full Tag Reference

This page documents all HTML attributes and custom elements used by Modular Mail to define editable content and style options in your email templates.

Quick reference

Core attributes

Attribute	Type	Default	Purpose
`mm-editable`	flag	-	Makes an element’s content editable
`mm-label`	string	element type	Human-readable name for the field
`mm-type`	`text` \| `textarea` \| `rich`	`text`	Input type in the editor
`mm-group`	string	none	Groups related fields together
`mm-maxlength`	number	unlimited	Character limit for text fields
`mm-options`	string	none	Assigns style option sets to an element

Rich text attributes

These attributes only apply when mm-type="rich" is set.

Attribute	Type	Default	Purpose
`mm-rich-controls`	string	`bold,italic,underline,link,clear`	Which formatting buttons to show
`mm-link-color`	hex color	`#3498DB`	Default link color
`mm-link-underline`	`true` \| `false`	`true`	Whether links are underlined
`mm-link-bold`	`true` \| `false`	`false`	Whether links are bold
`mm-color-mode`	`presets` \| `both`	`both`	Color picker mode
`mm-color-presets`	string	none	Predefined color options

Custom elements

Element	Purpose
`<mm-options>`	Define a style option set
`<mm-choice>`	A single choice within an option set

Core attributes

mm-editable

Add this attribute to any element you want to make editable. Modular Mail automatically assigns a unique identifier (mm-uid) to each editable element for tracking.

<p mm-editable>This text can be edited.</p>

The editor automatically detects the element type and creates appropriate fields:

Standard elements (<p>, <h1>, <span>, <td>, <div>, etc.) create a text field for the inner content.
Links (<a>) create two fields: one for the URL (href) and one for the link text.
Images (<img>) create two fields: one for the source URL (src) and one for the alt text (alt).

mm-label

Provides a human-readable name for the field in the editor sidebar. If omitted, a default label is generated based on the element type (“Link” for links, “Image” for images, or the tag name with ID for other elements).

<h1 mm-editable mm-label="Hero Headline">Welcome</h1>
<a mm-editable mm-label="Primary CTA" href="#">Learn More</a>
<img mm-editable mm-label="Product Image" src="product.jpg" alt="Product">

Always use clear, descriptive labels. Your team will see “Hero Headline” in the editor instead of a generic identifier.

mm-type

Specifies which input field type appears in the editor. Defaults to text if omitted.

Value	Description
`text`	Single-line text input (default)
`textarea`	Multi-line text input for longer content
`rich`	Rich text editor with formatting toolbar

<!-- Single-line input (default) -->
<h1 mm-editable mm-label="Headline">Title</h1>

<!-- Multi-line input -->
<p mm-editable mm-label="Description" mm-type="textarea">
  Longer content that might span multiple lines.
</p>

<!-- Rich text with formatting -->
<td mm-editable mm-label="Body Content" mm-type="rich">
  <p>Content with <strong>bold</strong> and <a href="#">links</a>.</p>
</td>

Use textarea for paragraphs or content that spans multiple lines. Use rich when your team needs formatting options like bold, italic, links, or text colors.

mm-group

Groups related fields together under a collapsible section in the editor sidebar. Apply this to a parent element and all editable children automatically inherit the group.

<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 appear under “Hero Section” in the editor, making it easier for your team to find related content.

You can also apply mm-group directly to an individual editable element:

<p mm-editable mm-label="Disclaimer" mm-group="Legal">Terms apply.</p>

mm-maxlength

Sets a character limit for text fields. The editor displays a character counter and prevents content from exceeding the limit. If omitted, no limit is enforced.

<p mm-editable mm-label="Preheader" mm-maxlength="100">
  Preview text shown in inbox...
</p>

This is useful for:

Preheader text - Most email clients display 40-130 characters
Subject lines - Keep under 50 characters for mobile
Headlines - Prevent layout-breaking long titles
Button text - Keep CTAs concise

The character counter appears below the input field, showing current length and the maximum allowed.

Rich text editing

When you set mm-type="rich", Modular Mail provides a formatting toolbar for that field. Rich text fields preserve HTML formatting like bold, italic, and links.

How rich text mode works

Rich text fields behave differently based on the parent element:

Block elements (<td>, <div>) allow multiple paragraphs - pressing Enter creates a new paragraph
Inline elements (<p>, <h1>, <span>, etc.) preserve single-line behavior - formatting is applied but paragraph structure is maintained

<!-- Block mode: allows multiple paragraphs -->
<td mm-editable mm-type="rich" mm-label="Body Content">
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</td>

<!-- Inline mode: single paragraph with formatting -->
<p mm-editable mm-type="rich" mm-label="Tagline">
  Your brand <strong>tagline</strong> here.
</p>

mm-rich-controls

Specifies which formatting buttons appear in the rich text toolbar. Provide a comma-separated list of control names.

Default: bold,italic,underline,link,clear

Control	Description
`bold`	Bold text formatting
`italic`	Italic text formatting
`underline`	Underlined text
`strike`	Strikethrough text
`link`	Insert and edit hyperlinks
`color`	Text color picker
`clear`	Remove all formatting

<!-- Default controls -->
<td mm-editable mm-type="rich" mm-label="Description">
  <p>Uses default formatting: bold, italic, underline, link, clear.</p>
</td>

<!-- Minimal controls for simple fields -->
<p mm-editable mm-type="rich" mm-rich-controls="bold,italic" mm-label="Caption">
  Only bold and italic available.
</p>

<!-- Full controls including color -->
<td mm-editable mm-type="rich" mm-rich-controls="bold,italic,underline,strike,link,color,clear" mm-label="Rich Body">
  <p>All formatting options available.</p>
</td>

Link styling attributes

Control how links appear when inserted via the rich text editor.

mm-link-color

Sets the default color for links. If omitted, links default to #3498DB (blue).

<td mm-editable mm-type="rich" mm-link-color="#1F7F4C">
  <p>Links will be <a href="#">green</a> by default.</p>
</td>

mm-link-underline

Controls whether links are underlined. Defaults to true.

<td mm-editable mm-type="rich" mm-link-underline="false">
  <p>Links will not have underlines.</p>
</td>

mm-link-bold

Controls whether links are bold. Defaults to false.

<td mm-editable mm-type="rich" mm-link-bold="true">
  <p>Links will be <a href="#">bold</a>.</p>
</td>

Combining link styles:

<td mm-editable mm-type="rich"
    mm-link-color="#E74C3C"
    mm-link-underline="false"
    mm-link-bold="true"
    mm-label="Promo Content">
  <p>Links appear as bold red text without underlines.</p>
</td>

Text color attributes

Control how the text color picker behaves in rich text fields. These only apply when color is included in mm-rich-controls.

mm-color-mode

Controls the color picker behavior.

Value	Description
`both`	Shows preset colors (if defined) plus a custom color picker (default)
`presets`	Only shows predefined colors from `mm-color-presets`

<!-- Both presets and custom picker (default) -->
<td mm-editable mm-type="rich" mm-rich-controls="bold,italic,color" mm-color-presets="Brand:#1F7F4C,Accent:#E74C3C">
  <p>Users see preset colors and can pick custom colors.</p>
</td>

<!-- Presets only - no custom picker -->
<td mm-editable mm-type="rich" mm-rich-controls="bold,italic,color" mm-color-mode="presets" mm-color-presets="Brand:#1F7F4C,Accent:#E74C3C,Dark:#333333">
  <p>Users can only choose from preset colors.</p>
</td>

mm-color-presets

Defines preset colors for the text color picker. Format: Name:#hex,Name:#hex (name followed by colon and hex color).

<td mm-editable mm-type="rich"
    mm-rich-controls="bold,italic,color"
    mm-color-presets="Primary:#1F7F4C,Secondary:#1B69DE,Alert:#E74C3C,Dark:#333333">
  <p>Quick access to brand colors.</p>
</td>

Preset names appear as tooltips when hovering over color swatches in the editor.

Style options

Style options let campaign editors choose from predefined visual styles without editing code. This is ideal for offering variations like spacing, background colors, or alignment while maintaining brand consistency.

How style options work

Style options have two components:

Option set definitions (<mm-options>) - Define the available choices and their CSS styles
Option assignments (mm-options attribute) - Apply option sets to specific elements

When a user selects a choice in the campaign editor, the CSS styles from that choice are applied to the element.

Defining option sets

Use <mm-options> elements to define sets of style choices. Each contains <mm-choice> elements specifying the available styles.

Where to place option set definitions

Location	Scope	Use case
Template header	Global - available to all modules	Common options: spacing, fonts, brand colors
Inside a module	Module-specific	Options unique to that module’s design

Global option sets (in template header)

Place <mm-options> elements in the template header block, typically after the <body> tag:

<body style="margin: 0; padding: 0;">

  <mm-options name="spacing" label="Section Spacing" default="standard">
    <mm-choice name="none" style="padding: 0;" />
    <mm-choice name="compact" style="padding: 20px;" />
    <mm-choice name="standard" style="padding: 40px 20px;" />
    <mm-choice name="spacious" style="padding: 60px 20px;" />
  </mm-options>

  <mm-options name="bg-color" label="Background Color" default="white">
    <mm-choice name="white" style="background-color: #ffffff;" />
    <mm-choice name="light" style="background-color: #f5f5f5;" />
    <mm-choice name="brand" style="background-color: #1F7F4C; color: #ffffff;" />
  </mm-options>

  <!-- Rest of header content -->
</body>

Global option sets are available to all modules in the template. At render time, Modular Mail combines the header, all modules, and footer into a single document, then extracts all <mm-options> definitions. This means any option set defined in the header can be referenced by any module using the mm-options attribute.

Module-specific option sets

Place <mm-options> at the beginning of a module’s HTML:

<mm-options name="hero-layout" label="Hero Layout" default="centered">
  <mm-choice name="centered" style="text-align: center;" />
  <mm-choice name="left" style="text-align: left;" />
</mm-options>

<table role="presentation" width="100%">
  <tr>
    <td mm-options="spacing,hero-layout" style="padding: 40px 20px; text-align: center;">
      <h1 mm-editable mm-label="Headline">Welcome</h1>
    </td>
  </tr>
</table>

Name collisions and precedence

If a module defines an option set with the same name as a global one, the module-specific definition takes precedence. This happens because the header HTML appears first in the combined document, and later definitions override earlier ones.

For example, if the header defines:

<mm-options name="spacing" label="Section Spacing" default="standard">
  <mm-choice name="compact" style="padding: 20px;" />
  <mm-choice name="standard" style="padding: 40px;" />
</mm-options>

And a module also defines:

<mm-options name="spacing" label="Module Spacing" default="tight">
  <mm-choice name="tight" style="padding: 10px;" />
  <mm-choice name="normal" style="padding: 30px;" />
</mm-options>

The module’s “spacing” definition completely replaces the global one for that module. Elements referencing mm-options="spacing" within that module will see “tight” and “normal” choices, not “compact” and “standard”.

This override behavior is useful when a specific module needs different spacing options than the rest of the template, but in most cases you should use unique names to avoid confusion.

`<mm-options>` element

Defines a set of style choices.

Attribute	Required	Default	Description
`name`	Yes	-	Unique identifier (used in `mm-options` attribute)
`label`	No	Auto-generated from name	Human-readable name shown in editor
`default`	No	First choice	Which choice is selected by default

If label is omitted, the name is automatically formatted (e.g., “bg-color” becomes “Bg Color”).

`<mm-choice>` element

Defines a single choice within an option set.

Attribute	Required	Description
`name`	Yes	Choice identifier and display name
`style`	Yes	CSS styles to apply when selected

<mm-options name="button-color" label="Button Color" default="primary">
  <mm-choice name="primary" style="background-color: #1F7F4C; color: #ffffff;" />
  <mm-choice name="secondary" style="background-color: #3498DB; color: #ffffff;" />
  <mm-choice name="dark" style="background-color: #333333; color: #ffffff;" />
</mm-options>

Assigning options to elements

Use the mm-options attribute to assign one or more option sets to an element. The value references the name of defined option sets.

<!-- Single option set -->
<td mm-options="spacing" style="padding: 40px 20px;">
  Content here
</td>

<!-- Multiple option sets (comma-separated) -->
<td mm-options="spacing,bg-color" style="padding: 40px 20px; background-color: #ffffff;">
  Content here
</td>

How styles are applied:

The element’s inline style attribute provides the base/default styles
When a user selects a choice, those styles are merged with the base styles
Choice styles override base styles for the same CSS properties

Multiple option sets and style precedence:

When you assign multiple option sets to an element (comma-separated), they are applied in order from left to right. If two option sets have choices that affect the same CSS property, the later option set wins.

<!-- bg-color styles override any conflicting styles from spacing -->
<td mm-options="spacing,bg-color" style="padding: 40px 20px;">

For example, if both option sets included a color property:

spacing choice sets color: #333333
bg-color choice sets color: #ffffff

The element would use color: #ffffff because bg-color comes after spacing in the list.

To avoid unexpected behavior, design your option sets to control distinct CSS properties (one for spacing, another for colors, another for alignment, etc.).

Combining with editable content:

Elements can have both mm-editable and mm-options:

<td mm-editable mm-options="spacing,bg-color" mm-label="Hero Content" style="padding: 40px 20px;">
  <p>This section is editable AND has style options.</p>
</td>

In the editor, this creates:

Text field for the content (labeled “Hero Content”)
Dropdown for “Section Spacing” choices
Dropdown for “Background Color” choices

Non-editable elements with options:

Elements can have style options without being editable:

<table mm-options="spacing" style="padding: 40px 20px;">
  <tr>
    <td>
      <p mm-editable mm-label="Content">Text here</p>
    </td>
  </tr>
</table>

The table has style options but no editable content - users can change the spacing without modifying the structure.

Style options in the editor

When option sets are assigned to elements, the campaign editor displays:

Style dropdown menus in the sidebar for each option set
Real-time preview updates when selections change
Grouped display if the element is within an mm-group

Option sets defined in the module appear in the “Style Options” section when editing that module.

Complete example

This example demonstrates editable fields, grouping, character limits, rich text, and style options working together:

<!-- Module-specific option set -->
<mm-options name="hero-align" label="Content Alignment" default="center">
  <mm-choice name="left" style="text-align: left;" />
  <mm-choice name="center" style="text-align: center;" />
</mm-options>

<!-- Module content -->
<table role="presentation" width="100%" mm-group="Hero Section">
  <tr>
    <td mm-options="spacing,hero-align" style="padding: 40px 20px; text-align: center;">

      <img mm-editable mm-label="Hero Image"
           src="hero.jpg" alt="Hero image"
           style="max-width: 100%;">

      <h1 mm-editable mm-label="Headline" mm-maxlength="60"
          style="margin: 20px 0 10px; font-size: 32px;">
        Welcome to Our Newsletter
      </h1>

      <p mm-editable mm-label="Description" mm-type="textarea" mm-maxlength="150"
         style="color: #666666; margin: 0 0 20px; font-size: 16px;">
        Stay informed with our latest updates, tips, and exclusive offers delivered straight to your inbox.
      </p>

      <td mm-editable mm-type="rich" mm-label="Body Content"
          mm-rich-controls="bold,italic,link,color"
          mm-link-color="#1F7F4C"
          mm-color-mode="presets"
          mm-color-presets="Brand:#1F7F4C,Accent:#E74C3C,Dark:#333">
        <p>Rich text content with <strong>formatting</strong> and <a href="#">brand-colored links</a>.</p>
      </td>

      <a mm-editable mm-label="CTA Button"
         href="#"
         style="display: inline-block; background: #1F7F4C; color: white; padding: 14px 28px; text-decoration: none; border-radius: 4px;">
        Get Started
      </a>

    </td>
  </tr>
</table>

This creates:

Style Options:

Section Spacing (from global template options)
Content Alignment (module-specific)

Editable Fields (grouped under “Hero Section”):

Hero Image (source URL and alt text)
Headline (single-line, 60 character limit)
Description (multi-line, 150 character limit)
Body Content (rich text with brand color presets)
CTA Button (link URL and button text)

HTML output

When campaigns are exported, Modular Mail produces clean HTML:

Custom elements removed - <mm-options> and <mm-choice> elements are stripped
Attributes removed - All mm-* attributes are removed
Styles applied - Selected option styles are merged into element style attributes
Content preserved - User-entered content and formatting are maintained

The exported HTML is compatible with all major email service providers.

Template Best Practices - Structuring editable regions effectively
Quick Start Guide - Getting started with templates

Full Tag Reference

Quick reference

Core attributes

Rich text attributes

Custom elements

Core attributes

mm-editable

mm-label

mm-type

mm-group

mm-maxlength

Rich text editing

How rich text mode works

mm-rich-controls

Link styling attributes

mm-link-color

mm-link-underline

mm-link-bold

Text color attributes

mm-color-mode

mm-color-presets

Style options

How style options work

Defining option sets

Where to place option set definitions

Global option sets (in template header)

Module-specific option sets

Name collisions and precedence

<mm-options> element

<mm-choice> element

Assigning options to elements

Style options in the editor

Complete example

HTML output

Related resources

`<mm-options>` element

`<mm-choice>` element