Tutorial: Creating an Email Marketing Template Using MJML and EJS with JSON Data

Tutorial to Create an Email Marketing Template Using MJML and EJS with JSON Data

In this tutorial, we will create an email marketing template using MJML for design and EJS for dynamic logic, with data from a JSON file. MJML simplifies creating responsive emails, while EJS allows us to easily integrate dynamic data.

Step 1: Set Up the Environment

First, we need to set up our development environment with Node.js and the necessary dependencies. Create a new project and run the following commands in your terminal:

mkdir email-template-project
cd email-template-project
npm init -y
npm install mjml ejs

Step 2: Create the MJML Template

Create a file named template.mjml in the project directory with the following content:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" color="#000000">
          Hello, <%= user.name %>!
        </mj-text>
        <mj-text>
          Thank you for subscribing to our newsletter. Here are your details:
        </mj-text>
        <mj-text> Email: <%= user.email %> </mj-text>
        <mj-image src="<%= user.avatar %>" alt="Avatar" width="100px" />
        <mj-button href="<%= user.confirmationLink %>">
          Confirm Subscription
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Step 3: Create the JSON Data File

Create a file named data.json with user data:

{
  "user": {
    "name": "Juan Pérez",
    "email": "juan.perez@example.com",
    "avatar": "https://example.com/avatar.jpg",
    "confirmationLink": "https://example.com/confirm"
  }
}

Step 4: Generate the Email

Create a file named generateEmail.js to process the MJML template with the JSON data:

const mjml = require("mjml");
const ejs = require("ejs");
const fs = require("fs");

const template = fs.readFileSync("template.mjml", "utf8");
const data = JSON.parse(fs.readFileSync("data.json", "utf8"));

const renderedMJML = ejs.render(template, data);
const { html, errors } = mjml(renderedMJML);

if (errors.length) {
  console.error("Errors generating the email:", errors);
} else {
  fs.writeFileSync("output.html", html);
  console.log("Email successfully generated in output.html");
}

Step 5: Run the Script

Run the following command in your terminal to generate the email:

node generateEmail.js

Result

The email will be generated in a file named output.html in the project directory. You can open this file in your browser to see the final result.

Conclusion

In this tutorial, we combined MJML and EJS to create a dynamic email marketing template. MJML makes responsive design easy, and EJS allows us to integrate dynamic data from a JSON file. This combination is very useful for efficiently generating personalized emails. Explore more options and customize your templates to improve your email marketing campaigns!