MJML Expert

MJML (Mailjet Markup Language) is a markup language designed to reduce the pain of coding responsive emails. It compiles to responsive HTML that works across email clients.

Document Structure

Every MJML document follows this hierarchy:

<mjml>
  <mj-head>
    <!-- Head components: styles, fonts, attributes, preview text -->
  </mj-head>
  <mj-body>
    <!-- Body components: sections, columns, content -->
  </mj-body>
</mjml>

Component Hierarchy

MJML enforces a strict nesting structure:

mjml
├── mj-head
│   ├── mj-attributes (define defaults and classes)
│   ├── mj-style (CSS styles)
│   ├── mj-font (external fonts)
│   ├── mj-title (document title)
│   ├── mj-preview (inbox preview text)
│   └── mj-breakpoint (responsive breakpoint)
│
└── mj-body
    ├── mj-wrapper (optional: wraps multiple sections)
    │   └── mj-section
    │
    └── mj-section (rows)
        ├── mj-group (prevents column stacking on mobile)
        │   └── mj-column
        │
        └── mj-column (responsive columns)
            ├── mj-text
            ├── mj-image
            ├── mj-button
            ├── mj-divider
            ├── mj-spacer
            ├── mj-social
            ├── mj-navbar
            ├── mj-table
            ├── mj-raw
            ├── mj-accordion
            ├── mj-carousel
            └── mj-hero

Critical rule: Content blocks (text, image, button, etc.) must always be inside mj-column. Columns must be inside mj-section or mj-group.

Column Sizing

Auto Sizing

By default, columns divide available width equally. Standard email width is 600px:

2 columns = 300px each
3 columns = 200px each
4 columns = 150px each

Manual Sizing

Override with explicit width attribute:

<mj-section>
  <mj-column width="33%"><!-- Narrow --></mj-column>
  <mj-column width="67%"><!-- Wide --></mj-column>
</mj-section>

Both pixel and percentage values are supported.

Common Attributes

Most components support these attributes:

Attribute	Description	Example
`padding`	Spacing inside element	`10px 25px`
`background-color`	Background color	`#ffffff`
`width`	Element width	`100%` or `300px`
`align`	Horizontal alignment	`left`, `center`, `right`
`vertical-align`	Vertical alignment	`top`, `middle`, `bottom`
`font-family`	Text font	`Arial, sans-serif`
`font-size`	Text size	`14px`
`color`	Text color	`#333333`
`line-height`	Line spacing	`1.5` or `22px`

Using Classes

Define reusable styles with mj-class:

<mj-head>
  <mj-attributes>
    <mj-class name="primary" background-color="#4A90D9" color="#ffffff" />
    <mj-class name="heading" font-size="24px" font-weight="bold" />
  </mj-attributes>
</mj-head>

<mj-body>
  <mj-section>
    <mj-column>
      <mj-button mj-class="primary">Click me</mj-button>
      <mj-text mj-class="heading">Welcome</mj-text>
    </mj-column>
  </mj-section>
</mj-body>

Background Images

Sections and wrappers support background images:

<mj-section background-url="https://example.com/bg.jpg"
            background-size="cover"
            background-repeat="no-repeat">
  <mj-column>
    <mj-text color="#ffffff">Content over image</mj-text>
  </mj-column>
</mj-section>

Full-Width Sections

By default, sections are constrained to 600px. Use full-width for edge-to-edge backgrounds:

<mj-section full-width="full-width" background-color="#f4f4f4">
  <!-- Content still constrained, but background extends full width -->
</mj-section>

Responsive Behavior

Columns automatically stack vertically on mobile (below breakpoint)
Use mj-group to prevent stacking for specific column groups
Default breakpoint is 480px; customize with mj-breakpoint
Images scale responsively by default

Reference Documentation

For complete component specifications with all attributes:

Body components: ${CLAUDE_SKILL_ROOT}/references/body-components.md
Head components: ${CLAUDE_SKILL_ROOT}/references/head-components.md
Layout patterns: ${CLAUDE_SKILL_ROOT}/references/patterns.md