MJML到响应式电子邮件HTML转换器
指导
MJML到响应式电子邮件HTML转换器
Paste MJML markup and instantly get production-ready, table-based responsive email HTML with Outlook (MSO) conditionals, inline styles, and a live desktop/mobile preview. The compilation runs entirely in your browser using the official MJML engine, so your templates never leave your machine.
如何使用
- Paste or type your MJML source in the left editor (or click 尝试一个示例 to load a starter template).
- Pick an output style: Beautified for readable HTML, 最小化 for the smallest payload, or Raw for the engine’s default.
- Choose a validation level: 柔软的 logs issues without blocking, 严格 aborts on errors, 跳过 turns validation off.
- Inspect the compiled HTML on the right and use the device toggle to preview desktop and mobile layouts.
- 点击 复制 HTML to copy the code, or 下载 .html to save it for your ESP or mail client.
特征
- Full MJML spec support – mj-section, mj-column, mj-button, mj-image, mj-text, mj-divider, mj-head attributes, and more.
- Outlook-ready output – MSO conditional comments and table-based layout for legacy Outlook desktop clients.
- 实时预览 – Sandboxed iframe with Desktop (600px) and Mobile (360px) device widths.
- Error and warning surfacing – Inline messages with line numbers and offending tag names.
- Beautify, minify, or raw output – Match the format to your editor or sending pipeline.
- 100% 客户端 – Your MJML source and rendered HTML never touch a server.
- 复制和下载 – One-click copy to clipboard or save as a standalone .html file.
常问问题
-
What is MJML and why is it used for email?
MJML (Mailjet Markup Language) is an open-source markup language designed to make responsive email development tractable. Coding HTML email by hand is painful because email clients (especially older versions of Outlook) require nested tables, inline styles, and MSO conditional comments to render correctly. MJML provides a higher-level component vocabulary (mj-section, mj-column, mj-button, mj-image, mj-text) that compiles down to that legacy, table-based HTML automatically, giving you a single source that renders consistently across modern and legacy clients.
-
Why does email HTML need tables and inline styles instead of modern CSS?
Email clients sandbox and rewrite the HTML they receive. Many clients strip styles, ignore external stylesheets, and only honor a small subset of CSS properties. Outlook for Windows uses Microsoft Word's HTML renderer, which has no support for flexbox, grid, or even floats. The only layout primitive that renders reliably everywhere is the HTML table with explicit width attributes plus inline styles on each element. MJML hides this verbose, error-prone scaffolding behind clean components.
-
What are MSO conditional comments and why do MJML outputs include them?
MSO conditionals are special HTML comments of the form that only Microsoft Outlook (Windows) processes. They let you ship alternate markup for Outlook — for example, VML (Vector Markup Language) shapes for bulletproof buttons that render as real rectangles even in Outlook's broken renderer. Compiled MJML output includes these conditionals so that a single template degrades gracefully from Apple Mail and Gmail to Outlook 2007 and later.
-
What does a responsive email actually mean given email clients' limited CSS?
Responsive email typically combines two strategies: a fluid, table-based desktop layout (max-width around 600px, centered) and a set of CSS media queries that stack columns vertically and resize fonts on narrow viewports. Because some clients ignore media queries, MJML emits a layout that already adapts to common widths via percentage-based tables, then layers media-query overrides on top for clients that honor them. The result is an email that looks intentional on a phone even when CSS support is partial.
-
What is the practical difference between beautified and minified HTML output?
Beautified output keeps indentation and line breaks intact, which is helpful when inspecting the markup, diffing template changes, or pasting into a code review. Minified output removes whitespace and comments to shrink the payload — useful because some ESPs charge per kilobyte and Gmail clips messages over roughly 102KB. Functionally the two produce the same rendered email; pick beautified when you're authoring and minified when you're sending.
