How to install and set up MJML for email development (Updated for 2026)

MJML is still one of the most practical ways to build responsive HTML emails that render reliably across Outlook, Gmail, Apple Mail, Yahoo Mail, and other major email clients.

Instead of manually building deeply nested HTML tables, developers can work with reusable components that compile into production-ready email HTML.

In this guide, we’ll walk through the modern MJML workflow most email developers use today, including:

• Local installation with npm

• VS Code or Cursor setup

• Watch mode

• Live preview workflows

• AI-assisted development

Why developers still use MJML

Email development remains unusually difficult compared to modern web development.

Outlook still uses Microsoft Word for rendering. Gmail strips certain CSS. Mobile clients behave inconsistently. Dark mode support varies across platforms.

MJML helps simplify all of this by providing higher-level components that compile into compatible HTML email markup.

MJML is not a visual drag-and-drop builder. It’s a developer workflow for building production email HTML faster and more reliably.

The recommended MJML workflow in 2026

Today, most developers use MJML locally inside a code editor.

A typical setup includes:

• VS Code or Cursor: While VS Code remains the industry standard, many developers have shifted to Cursor for its deep AI integration, which is particularly effective at generating MJML structures.

• The MJML Extension: This provides a real-time side-by-side preview, syntax highlighting, and linter support directly within your editor.

• Local npm installation: Installing MJML via npm install mjml allows you to manage versions per project and ensures your CI/CD pipeline remains consistent.

• Watch Mode: Using the CLI command mjml --watch input.mjml -o output.html enables automatic compilation, so your HTML file updates every time you hit "Save."

• Git-based Version Control: Tracking your .mjml files in a GitHub or GitLab repository is essential for team collaboration and maintaining a history of your email templates.

Many developers also use AI coding tools like Cursor or GitHub Copilot to speed up repetitive email development tasks.

This workflow is generally faster and easier to maintain than older desktop-app-based approaches.

Prerequisites

Before installing MJML locally, you’ll need:

• A recent LTS version of Node.js (Node 22+ recommended)

• npm (included with Node.js)

• A code editor like VS Code or Cursor

• Basic familiarity with terminal commands

You can download Node.js here: Node.js Downloads

Step 1: Install the MJML extension

The easiest way to work with MJML is directly inside your editor.

If you use VS Code or Cursor:

1. Open Extensions

2. Search for “MJML”

3. Install the MJML extension

Once installed, .mjml files will automatically support:

• Syntax highlighting

• Formatting

• Validation

• Live preview support

Step 2: Create your first MJML file

Create a file named:

Then add a basic template:

<mjml>
 <mj-body>
   <mj-section>
     <mj-column>
       <mj-text>
         Hello from MJML!
       </mj-text>
     </mj-column>
   </mj-section>
 </mj-body>
</mjml>

<mjml>
 <mj-body>
   <mj-section>
     <mj-column>
       <mj-text>
         Hello from MJML!
       </mj-text>
     </mj-column>
   </mj-section>
 </mj-body>
</mjml>

<mjml>
 <mj-body>
   <mj-section>
     <mj-column>
       <mj-text>
         Hello from MJML!
       </mj-text>
     </mj-column>
   </mj-section>
 </mj-body>
</mjml>

MJML components will eventually compile into standard responsive email HTML.

Step 3: Install MJML locally with npm

Inside your project folder, initialize npm and install MJML:

Installing MJML locally is the preferred standard because it ensures project dependencies are strictly versioned, keeping MJML versions consistent across entire teams. This local approach simplifies CI/CD management and makes repositories more portable, allowing any developer to replicate the exact environment through a standard installation.

Step 4: Compile MJML into HTML

To generate responsive HTML from your MJML file, run:

npx mjml index.mjml -o index.html

npx mjml index.mjml -o index.html

npx mjml index.mjml -o index.html

This creates production-ready HTML email markup.

Step 5: Use watch mode during development

Most developers use watch mode while building emails.

Instead of manually recompiling after every change, MJML automatically rebuilds your HTML whenever the source file changes.

Run:

npx mjml --watch index.mjml -o index.html

npx mjml --watch index.mjml -o index.html

npx mjml --watch index.mjml -o index.html

This creates a much faster feedback loop during development.

Live preview workflows

Many MJML editor extensions support live preview rendering.

This allows developers to:

• See layout changes immediately

• Catch rendering issues earlier

• Test responsive layouts faster

• Iterate more efficiently

Combined with watch mode, live preview creates a much smoother workflow than older editor or desktop app approaches.

Using AI with MJML

MJML works especially well with AI-assisted coding because its syntax is highly structured and predictable.

Developers commonly use tools like:

• Cursor

• GitHub Copilot

These tools can help:

• Generate reusable email sections

• Convert HTML into MJML

• Build responsive layouts faster

• Troubleshoot rendering issues

• Speed up repetitive markup tasks

For larger email systems, AI tools can also help maintain consistency across reusable modules and templates.

Alternative option: Use the MJML online editor

If you want to experiment with MJML without installing anything locally, the MJML online editor is still useful.

The online editor allows you to:

• Write MJML directly in the browser

• Preview rendered emails instantly

• Export generated HTML

• Test responsive layouts quickly

However, most long-term production workflows now happen locally inside editors like VS Code or Cursor.

What about the MJML desktop app?

While the MJML desktop app remains available, it has largely shifted from being a professional standard to a secondary tool in the modern developer's toolkit. In today's ecosystem, it serves best as an entry point for beginners who are just starting to learn the MJML syntax or for those who need to build simple, standalone templates without the overhead of a full development environment. Its primary strength lies in quick visual experimentation, offering a dedicated space to test ideas without distracting from other open projects.

However, as projects grow in complexity, most teams eventually outgrow the standalone application. Professional workflows now favor local, editor-based setups that leverage npm and version control systems like Git. By moving away from the desktop app and into environments like Visual Studio Code, developers gain access to more robust automation, collaborative features, and the ability to integrate email builds directly into their broader deployment pipelines.

Testing your compiled HTML

After compiling MJML into HTML, always test your email across multiple email clients.

Email rendering still varies significantly between platforms.

Recommended testing environments include:

• Outlook

• Gmail

• Apple Mail

• Yahoo Mail

• Mobile email clients

Testing helps identify:

• Spacing inconsistencies

• Dark mode rendering issues

• Font fallback problems

• Mobile responsiveness issues

• Outlook-specific rendering bugs

Final thoughts

MJML remains one of the most reliable frameworks for responsive email development.

The modern workflow is fairly simple:

• Write MJML locally in VS Code or Cursor

• Compile with npm

• Use watch mode during development

• Preview changes live

• Test the compiled HTML across major email clients

For most email developers, this setup provides the best balance of speed, maintainability, and rendering reliability.

Once you’ve installed MJML, the next step is learning how to build responsive, production-ready emails efficiently. If you’re new to MJML, start with our intro to MJML to learn the fundamentals, then explore our MJML FAQs and cheatsheet for common workflows, components, and development patterns.

Need additional help? Reach out to our team can support custom email development, scalable template systems, and production-ready responsive emails.