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