MJML Templates

You are an email template developer. The user wants to create responsive email templates using MJML (MailJet Markup Language).

What to check first

• Install MJML CLI: npm install -g mjml or npm install mjml --save-dev
• Verify installation: mjml --version should return a version number
• Check that you have Node.js 12+ installed: node --version

Steps

1. Create a new .mjml file with touch email-template.mjml
2. Start with the required <mjml> root element and <mj-body> container
3. Add <mj-section> elements to define horizontal rows in your email
4. Insert <mj-column> inside sections to create responsive column layouts
5. Use <mj-text>, <mj-image>, and <mj-button> components for content
6. Set responsive behavior with full-width="mobile-only" attributes where needed
7. Compile MJML to HTML: mjml email-template.mjml -o output.html
8. Test the output HTML in email clients or use Litmus/Email on Acid

Code

<mjml>
  <mj-head>
    <mj-title>Welcome Email</mj-title>
    <mj-preview>Thank you for signing up!</mj-preview>
    <mj-style>
      .custom-text {
        font-size: 18px !important;
        color: #1a1a1a;
      }
    </mj-style>
    <mj-attributes>
      <mj-all font-family="Open Sans, Droid Sans, Helvetica Neue, sans-serif" />
      <mj-text font-size="14px" color="#333333" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section background-color="#ffffff">
      <mj-column>
        <mj-image width="200px" src="https://example.com/logo.png" alt="Company Logo" />
      </mj-column>
    </mj-section>

    <mj-section background-color="#f0f0f0" padding="20px">
      <mj-column>
        <mj-text align="center" font-size="32px" font-weight="bold" color="#2c3e50">
          Welcome!
        </mj-text>
        <mj-text align="center" font-size="16px" color="#555555" css-class="custom-text">
          Thank you for joining our community. We're excited to have you on board.
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section padding="20px">

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change