Free Tool

Free MJML Editor & Email Builder

Drag-and-drop responsive emails with a live preview, edit the MJML head styles directly, and export bulletproof HTML that renders cleanly in Outlook, Gmail, Apple Mail and every modern client. No signup, runs entirely in your browser.

Open MJML Editor See Features
MJML editor showing drag-and-drop canvas, component library and properties panel

A Real MJML Editor — Drag, Preview, Export

🧩

Drag-and-Drop MJML Blocks

Sections, columns, text, buttons, images, dividers, spacers, social, hero, navbar, accordion — every MJML component with strict, email-safe nesting rules so you cannot build an invalid email.

📱

Desktop + Mobile Preview

Live preview at 600 px desktop and 320 px mobile, so you can sanity-check stacking and tap targets before you hit export.

🎨

Global Styles (mj-attributes)

Set typography, button radius, link colours and section padding once in the head — every block inherits them so your email stays consistent.

📤

Export Bulletproof HTML or MJML

Compile to send-ready, minified HTML with Outlook conditional comments and bulletproof buttons. Or grab the clean MJML source / JSON tree for a developer handoff.

⚠️

Pre-flight Checks

Warnings for Gmail clipping (102 KB), missing alt text, placeholder links and oversized images — before you send and embarrass yourself.

🔐

Local-First & Private

Templates and assets save to your browser (IndexedDB). No account, no upload, no analytics. Works offline after the first load.

Built for Real Email Workflows

Visual MJML Editor With Strict Nesting

Compose email-safe layouts by adding sections and columns, then dropping in text, buttons, images, spacers, dividers, navbars, social blocks, heroes and accordions. The editor enforces MJML's nesting rules so you cannot build a layout that compiles to broken HTML.

  • Component library with all standard MJML 4 components
  • Strict parent/child rules (mj-section → mj-column → content)
  • Per-node properties panel: padding, alignment, colour, font, link
  • Undo / redo for safe iteration
  • Save templates locally and reuse across projects
MJML editor canvas with drag-and-drop components and properties panel

Global Styles, Preview Text & Custom CSS

Set typography, button defaults, link colours and section padding once in <mj-attributes> — every component inherits them. Set the inbox preview text, drop in custom <mj-style> CSS for advanced cases, and pick your target ESP (Mailchimp, Klaviyo, Sendgrid, Hubspot, Brevo, Campaign Monitor, MailerLite) so merge-tag syntax matches.

  • Global font, size, line-height, colour for all text
  • Button defaults: radius, colour, font, padding
  • Custom CSS in mj-style for advanced effects
  • Inbox preview-text snippet
  • ESP-aware merge tag syntax
Global styles panel showing typography, button defaults and ESP selector

Bulletproof HTML Export With Pre-flight Checks

Export send-ready HTML (optionally minified) with Outlook conditional comments, VML buttons and table-based fallbacks intact — the same bulletproof output MJML is famous for. Pre-flight checks warn about Gmail 102 KB clipping, missing alt text and placeholder links before you ship.

  • Bulletproof, table-based HTML for Outlook 2007–2019 + 365
  • VML-backed bulletproof buttons
  • Minified output, Outlook conditional comments preserved
  • Gmail 102 KB clipping warning
  • Alt-text + placeholder-link warnings
  • Export as HTML, MJML source, or JSON tree
Export modal showing format options and pre-flight checks

MJML Editor FAQ

Yes. MJML is an open-source markup language (MIT licence) created by Mailjet, the same team behind Passport.js. You can use it commercially, modify it, embed it in your own tooling — no licence fee. This editor is also completely free with no signup, no subscription, no daily usage cap. Templates stay in your browser.
Bulletproof HTML is the email-development term for markup that renders consistently across Outlook 2007–2019/365 (still ~30 % of corporate inboxes), Gmail, Apple Mail, Yahoo, Thunderbird, mobile and web clients. It relies on table-based layouts, inline CSS, VML for buttons in Outlook, and conditional comments. MJML compiles your simple component markup into exactly this output — you write <mj-button>, it ships ~50 lines of bulletproof HTML.
The official MJML playground is a code editor: you write MJML on the left, see HTML on the right. This tool is a visual editor: drag-and-drop components on a canvas, edit attributes in a panel, see MJML or HTML at any time. It also adds: template storage, global styles editor, ESP-aware merge tags and pre-flight checks. Use whichever fits your workflow; many people use both.
You can paste MJML source into the editor and the structure is rebuilt as a tree. If you have HTML emails you want to convert back to MJML, that conversion is lossy and unreliable — we recommend starting from the closest template and adapting.
Pick your ESP in the global styles panel and the editor switches merge-tag syntax automatically:
• Mailchimp: *|FNAME|*, *|EMAIL|*
• Klaviyo: {{ first_name }}, {{ email }}
• Sendgrid: {{first_name}}
• Hubspot: {{ contact.firstname }}
• Brevo (Sendinblue): {{ params.FNAME }}
• Campaign Monitor: [firstname,fallback=]
• MailerLite: {$name}
Drop them straight into text blocks, buttons, links — they pass through untouched on export.
Yes — the full MJML 4 spec: mj-section, mj-column, mj-text, mj-button, mj-image, mj-divider, mj-spacer, mj-social + mj-social-element, mj-hero, mj-navbar, mj-accordion, mj-table, mj-raw, mj-carousel, mj-wrapper, mj-group. Head: mj-attributes, mj-style, mj-font, mj-preview, mj-title.
Outlook (Word-rendered) is the reason MJML exists. Buttons compile to VML markup wrapped in conditional comments so Outlook 2007–2019 / 365 see a real, clickable, rounded button — not a sad blue link. Background images use VML fallback. Spacing, font fallback and bulletproof image tables are all included. You write <mj-button border-radius="6px"> once; the compiler handles the gnarly Outlook side.
Gmail clips messages whose raw HTML exceeds 102 KB (after gzip, before images). The pre-flight check in the export modal flags this before you send. Common culprits: large inlined base64 images (use hosted URLs instead), huge custom CSS blocks, repeated long content. Aim for under 95 KB to leave headroom for personalisation tokens.
Yes — open the code view to switch between MJML source and compiled HTML at any time. The preview modal renders the compiled HTML in a sandboxed iframe, so you can view what your email actually looks like without sending a test.
Yes. Pick the ESP, design your email, export HTML, paste into the ESP's "Code Your Own" / "Paste in code" template option. Merge tags use the right syntax automatically. For Mailchimp you can also paste the MJML source into their Code Editor block. Klaviyo, Sendgrid, Hubspot and Brevo all accept the compiled HTML as a custom template.
In your browser only, using IndexedDB. Nothing is uploaded — no template content, no images, no template names, no analytics. If you clear browser data the templates are gone, so export important templates as MJML / JSON for backup.
Yes. The JSON export contains the full template tree (nodes, attributes, head styles, preview text) so you can feed it into a build pipeline that compiles MJML server-side — useful for templates that need dynamic content rendered per recipient.
Puida Oy builds free professional tools for designers, marketers and developers. This editor uses the official open-source MJML compiler under the hood. Questions or feature requests? Email hello@puida.com.

Build Emails That Render Everywhere

Free MJML editor with bulletproof HTML export. No signup, no subscription, runs in your browser.

Open the Editor