Everything you need to know about MJML (2026 version)

Note: This article was originally published by Kristina Lauren and extensively updated in May 2026 to reflect current MJML tooling and workflows.

MJML is one of the most useful tools for building responsive HTML emails. It gives email developers a cleaner, simpler way to write email code without manually wrestling with every table, inline style, and Outlook-specific workaround.

That said, MJML can be confusing at first because it is not the final code that gets sent to inboxes. MJML is written by developers, then compiled into HTML. That compiled HTML is what gets uploaded or pasted into your email service provider.

In this guide, we’ll walk through what MJML is, how it relates to HTML, how to install and edit MJML files, how to convert MJML into HTML, and how it fits into modern email development workflows.

What is the difference between MJML and HTML?

MJML and HTML are closely related, but they operate at different layers of the email development process.

HTML is the underlying markup language rendered by email clients like Gmail, Outlook, and Apple Mail. Every marketing email eventually becomes HTML before it is sent.

MJML is a framework built on top of HTML specifically for responsive email development. Instead of writing large amounts of table-heavy email HTML by hand, developers write simplified MJML components like <mj-section>, <mj-column>, <mj-text>, and <mj-button>. MJML then compiles those components into responsive HTML email code.

This distinction matters because email HTML is notoriously difficult to work with. Unlike modern web browsers, email clients have inconsistent support for CSS and often rely on outdated rendering engines. Developers frequently need nested tables, inline styles, Outlook-specific fallbacks, and other compatibility techniques to make an email render consistently.

MJML helps abstract away much of that complexity. It lets developers write cleaner, more readable source code while still producing standard HTML that email clients can render.

In other words: MJML is not an alternative to HTML email. It is a developer-friendly way to produce HTML email more efficiently.

What is MJML Framework?

The word “framework” gets used often when describing MJML, but in practical terms, MJML is a collection of reusable components designed specifically for responsive email development.

Instead of manually building complex email table structures yourself, MJML gives you higher-level building blocks for common email elements, including:

• sections

• columns

• text

• images

• buttons

• dividers

• social links

• navigation

• wrappers

These components compile into responsive HTML email code. Many of the concepts will feel familiar if you already know HTML or CSS, but MJML reduces the amount of code required to create reliable email layouts.

That is the main value of MJML: it does not eliminate HTML, but it makes HTML email development much more manageable.

Is MJML open-source?

Yes. MJML is open-source, which means the framework is publicly available and maintained with input from the broader developer community.

Because MJML is open-source, developers can use it for free, inspect how it works, contribute improvements, build custom components, and incorporate it into larger development workflows.

This is one reason MJML has remained popular in email development. It is not just a standalone tool. It has an ecosystem of editor extensions, build tools, community packages, and integrations that make it easier to use across different teams and workflows.

How do I install MJML for local development?

MJML must be compiled into HTML before it can be used in an email campaign. The MJML file itself is not what gets sent to inboxes. The compiled HTML output is what ultimately gets uploaded or pasted into your ESP.

Today, most developers work with MJML inside editors like Visual Studio Code, Cursor, or another code editor. AI coding tools can also help generate and modify MJML quickly because the syntax is structured and relatively easy to read.

A typical local workflow looks like this:

1. Install Node.js

2. Install MJML

3. Create or edit .mjml files

4. Compile the MJML into HTML

5. Upload or paste the HTML into your ESP

To install MJML globally, run:

npm install -g mjml

Then you can compile an MJML file into HTML with:

mjml template.mjml -o output.html

The resulting output.html file is the version you would typically upload, paste into, or sync with your email platform.

Some editor extensions can automatically compile MJML in the background while you work, but many developers still run the MJML compiler manually as part of their workflow.

How do I open and edit MJML files?

Once MJML is installed locally, you can open and edit .mjml files in a standard code editor like Visual Studio Code or Cursor.

Most developers treat MJML files like any other source code file. You edit the MJML, preview the compiled HTML email, test the output, and then upload the final HTML to your ESP.

A common workflow looks like this:

1. Open the .mjml file

2. Edit the sections and components

3. Preview the compiled HTML email

4. Test rendering across inboxes

5. Upload the final HTML to your ESP

Many MJML editor extensions provide helpful features like syntax highlighting, autocomplete, live previews, and automatic HTML compilation.

If you do not want to install anything locally, the official MJML online editor is often the fastest way to experiment with templates directly in the browser.

If you happen to download an .mjml file from somewhere online, you can also open it in any text editor to inspect the raw MJML source code.

How do I convert MJML to HTML?

MJML must be compiled into HTML before it can be used in an ESP or sent as an email.

There are three common ways to convert MJML to HTML.

Inside a code editor

Many developers use editors like Visual Studio Code or Cursor with MJML extensions that can preview and compile HTML while they work.

In this workflow, you edit the .mjml file and continuously preview the generated HTML email as changes are made.

Using the MJML command line tool

If MJML is installed locally through npm, you can compile files directly from the terminal:

mjml my-email.mjml -o my-email.html

This creates a standard HTML file that can be uploaded to your ESP or email platform.

Using the online editor

For quick testing or experimentation, the official MJML online editor lets you paste MJML directly into the browser and preview the generated HTML side by side.

This is often the easiest option for learning MJML or troubleshooting small template changes.

Can I convert HTML to MJML?

Sometimes, but it is not always clean.

MJML is designed to compile into HTML. Going in the other direction, from HTML back into MJML, is more difficult because email HTML is often deeply nested, heavily inlined, and full of client-specific workarounds.

There are open-source utilities and web-based tools that attempt to convert HTML email code back into MJML. These can be useful if you are trying to reverse-engineer an existing template, but the output usually requires manual cleanup.

In practice, HTML-to-MJML conversion works best when the original HTML is relatively clean and structured. If the HTML came from an old ESP template, a drag-and-drop builder, or a heavily customized email, expect to spend time reviewing and fixing the converted MJML.

Does Mailchimp support MJML?

Mailchimp does not natively support MJML files in the same way it supports HTML email code.

That does not mean you cannot use MJML with Mailchimp. It just means you need to compile your MJML into HTML first.

The workflow is:

1. Build the email in MJML

2. Compile the MJML into HTML

3. Upload or paste the compiled HTML into Mailchimp

This is the same general workflow you would use for many ESPs that do not directly support MJML as a source format.

How do you use MJML in React?

MJML can also be used inside React-based workflows, but this is a more advanced use case.

For teams building email templates inside a larger application or component system, packages like mjml-react allow developers to write MJML-like email components using React.

A simplified setup might look like:

npm install mjml-react

From there, developers can create reusable email components and render them into MJML or HTML as part of a build process.

This approach is usually more relevant for engineering teams building internal email systems, design systems, or highly reusable template libraries. If you are just building individual marketing emails, standard MJML files are usually simpler.

Can AI tools help write MJML?

Yes. Modern AI coding assistants can be genuinely useful for writing MJML because MJML has a clean, semantic structure.

For example, you can ask an AI assistant to:

• create a basic responsive email layout

• convert a plain-language design description into MJML

• add sections to an existing MJML file

• clean up repeated code

• troubleshoot syntax errors

• simplify a bloated email template

AI tools are especially helpful for getting a first draft of an MJML structure. However, you should still review and test the compiled HTML before sending. Email development has many edge cases, and AI-generated code can still make mistakes with spacing, mobile stacking, Outlook rendering, or ESP-specific requirements.

A good workflow is to use AI to move faster, then rely on testing and review to make sure the final HTML is production-ready.

Where can I find MJML tutorials?

The official MJML documentation is a good place to start if you want to learn the core components and syntax.

You can also learn MJML by taking apart existing templates. Because MJML is easier to read than raw email HTML, it is often a good entry point for marketers, designers, and developers who want to better understand how email layouts are built.

At Scalero, we also have resources like MJML tutorials and cheatsheets that cover common snippets used in production email development.

Where can I get help with MJML?

If you are having trouble with MJML, the first step is usually to identify where the issue is happening.

There are a few common categories:

• The MJML itself has a syntax issue

• The MJML compiles, but the HTML does not render as expected

• The email looks right in one inbox but breaks in another

• The ESP modifies the HTML after upload

• The design requires custom HTML beyond what MJML handles cleanly

MJML is powerful, but it does not remove every challenge of email development. You still need to test the compiled HTML across email clients and make adjustments when needed.

If you need help creating, cleaning up, or troubleshooting MJML templates, Scalero can help. Our team works across email design, development, lifecycle marketing, ESP implementation, and campaign production. We can build customizable email templates, convert designs into responsive HTML, and help teams create more reliable email development workflows.