MJML editor
Type MJML on the left, get the compiled email on the right — desktop and phone width, errors with line numbers, the HTML weight against Gmail's 102 KB clip. Copy or download the HTML when it looks right. Nothing leaves your browser.
- Status
- —
- HTML weight
- —
- Gmail clip (102 KB)
- —
- Lines of MJML
- —
What MJML does
MJML is a markup language for email: you write <mj-section>, <mj-column>,
<mj-text> and <mj-button>, and the compiler writes the nested tables, the
Outlook conditional comments, the inline styles and the media queries that make it hold up in every client.
The compiled HTML is what you send — MJML is a build step, not a runtime.
Why an editor in the browser
Installing the CLI is fine for a project and too much for checking one idea. This page runs the same
compiler (mjml-browser) locally, so you can try a layout, see the HTML, and take it away.
Our MJML basics guide walks through the tags; the
email templates are MJML source plus compiled HTML if you want a
finished series rather than a blank page — the Newsletter
set covers digest, magazine and announcement layouts, and Transactional
covers the receipt, shipped, reset and verify emails. For what goes in them:
anatomy of a newsletter and
responsive email without a framework.
What it doesn't do
No mj-include (no files to include from), no sending, no saved projects beyond the draft in
your browser. It is a compiler with a preview, and that is the point of it.
Questions
Is anything uploaded?
No. The MJML compiler runs in your browser (mjml-browser, the same engine as the mjml npm package); the preview is a local iframe. Close the tab and it's gone, except the draft kept in your browser's storage for next time.
Which MJML version is this?
mjml-browser 5.4 — the current MJML 5 line. If a tag behaves differently from your build, check the MJML version pinned in your project.
Why does the preview look different from Outlook?
The preview is your browser rendering the compiled HTML. MJML's output includes the Outlook conditionals, but only Outlook renders them; paste the HTML into the email check for the tag-level warnings.
Can I use mj-include?
Not here: includes read files from disk, and the browser has none. Paste the included parts in.
Is the compiled HTML mine?
Yes — MJML is MIT-licensed and the output is yours. The sample email on this page is also free to reuse.