Sending Beautiful Emails with AWS SES Using MJML in Node.js

When working with AWS Simple Email Service (SES), sending plain text or simple HTML emails is straightforward. However, when dealing with complex email layouts, using raw HTML can be cumbersome and difficult to maintain. That’s where MJML comes in!

In this blog, I’ll walk you through how I tackled the challenge of sending rich, responsive email templates using MJML and Node.js with AWS SES.

🚀 The Problem

Initially, I attempted to send emails using JavaScript template literals with inline HTML. However, I quickly realized that email clients don’t always render complex UI properly, and maintaining raw HTML in JavaScript templates was neither scalable nor developer-friendly.

Issues with Template Literals:

• Hard to read and maintain.
• Styling inconsistencies across email clients.
• No built-in support for responsive design.

💡 The Solution: MJML (Mailjet Markup Language)

MJML is an open-source framework that simplifies email development by providing an easy-to-use syntax that compiles to responsive HTML. It significantly reduces development time and ensures consistency across email clients.

Why Use MJML?

✅ Simple and readable syntax. ✅ Generates responsive emails automatically. ✅ Ensures cross-client compatibility. ✅ Reduces boilerplate HTML code.

🔧 Setting Up MJML with AWS SES in Node.js

Let’s go step by step to integrate MJML with AWS SES in a Node.js project.

Step 1: Install Dependencies

First, install the required npm packages:

pnpm add aws-sdk mjml nodemailer

• aws-sdk: To interact with AWS SES.
• mjml: To compile MJML templates to responsive HTML.
• nodemailer: For sending emails via SES.

Step 2: Create an MJML Template

Create a file emailTemplate.mjml:

<mjml>
  <mj-head>
    <mj-title>Welcome Email</mj-title>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello, Welcome to our platform!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This is a simple welcome email template written in MJML.

Step 3: Compile MJML to HTML in Node.js

In your Node.js application, use mjml to convert the template into HTML before sending the email.

const mjml = require("mjml");
const AWS = require("aws-sdk");
const nodemailer = require("nodemailer");

// Configure AWS SES
const ses = new AWS.SES({ region: "us-east-1" });

// Convert MJML to HTML
const mjmlTemplate = `
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello, Welcome to our platform!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
`;
const { html } = mjml(mjmlTemplate);

// Configure Nodemailer with SES
const transporter = nodemailer.createTransport({
  SES: new AWS.SES({ apiVersion: "2010-12-01" }),
});

// Send Email
async function sendEmail() {
  try {
    const mailOptions = {
      from: "your-email@example.com",
      to: "recipient@example.com",
      subject: "Welcome to Our Platform!",
      html, // Use the compiled MJML output
    };

    await transporter.sendMail(mailOptions);
    console.log("Email sent successfully!");
  } catch (error) {
    console.error("Error sending email:", error);
  }
}

sendEmail();

📌 Key Takeaways

1. MJML makes email development easy: Writing responsive emails becomes a breeze.
2. AWS SES is a cost-effective solution for sending bulk emails.
3. Nodemailer simplifies the integration of SES in Node.js applications.
4. Always test email rendering in different clients (Gmail, Outlook, Yahoo, etc.) before sending bulk emails.

🎯 Conclusion

If you’re working with AWS SES and struggling with complex email templates, MJML is a game-changer. It saves time, improves maintainability, and ensures a consistent email experience across different clients.

Now, go ahead and integrate MJML into your next AWS SES email project and make your emails look amazing! 🚀

💬 Have any questions? Drop them in the comments!