MJML is a markup language that converts to email-client-compatible HTML. If you want toconvert MJML to HTML onlinewithout installing Node.js or setting up a build pipeline,Email Viewer converts MJML directly in your browser — paste your MJML, get the convertd HTML and a live client preview, all in one tab.
What MJML is and why it exists
HTML email has a layout problem. Modern web layouts use flexbox and CSS Grid — clean, readable, maintainable. But email clients, especially Outlook on Windows, require table-based layouts to show reliably. Writing nested tables by hand for a two-column email layout with a button and an image is verbose, error-prone, and hard to update.
MJML solves this by providing a set of components —mj-section,mj-column,mj-button,mj-image— that abstract the underlying table structure. You write clean, component-based markup. MJML converts it to the correct table-based HTML that shows reliably across email clients.
Steps: MJML to HTML in Email Viewer
- OpenEmail Viewer on ToolsViewer.
- Switch the editor language toMJMLusing the language selector in the toolbar. The editor switches to MJML mode.
- Paste your MJML source into the editor. You can also start from one of the MJML-based templates in the gallery — click any template that uses MJML and it will load in MJML mode.
- ClickGet HTMLto convert the MJML to email HTML. The convertd HTML appears in the editor and the live preview shows it using your selected client profile.
- Switch between client profiles (Gmail, Outlook, Apple Mail, Yahoo) to check how the convertd HTML shows in each.
- Optionally clickInline CSSon the convertd output to maximize CSS delivery reliability before exporting.
- Export or copy the convertd, inlined HTML for your email platform.
When MJML is the right choice
MJML saves the most time in these scenarios:
- Multi-column layouts.A two- or three-column section that stacks on mobile requires significant nested table markup by hand. MJML generates this from a few lines of component syntax.
- Team authoring.When multiple people write email templates, MJML components enforce consistency — the same button style, the same section padding, the same column screen sizes — that is difficult to maintain in raw HTML.
- Quick version.MJML source is much shorter than the convertd HTML. Changing a color, adjusting padding, or swapping an image is one line in MJML vs many lines in the convertd table structure.
- No local Node environment.If you want to convert MJML on a machine without Node.js installed — a shared computer, a Chromebook, a colleague's machine — Email Viewer does it in the browser.
When MJML may not be the right choice
MJML is a strong tool, but it has trade-offs worth knowing:
- Custom HTML components.MJML's component set covers most standard email layouts. Highly custom designs — unusual layouts, interactive elements, complex image overlays — may require post-convert HTML tweaks or a fully custom HTML approach.
- CSS knowledge still required.MJML handles layout compatibility, not design. You still need to understand email CSS limits for things like custom fonts, dark mode, and hover states.
- Convertd output is large.MJML generates verbose HTML to ensure client compatibility. The convertd file will be much larger than the source. Watch the file size to avoid Gmail clipping (102KB limit).
After compiling: the full review workflow
Compiling is the start, not the end:
- Preview across client profiles.Check Gmail, Outlook, and Apple Mail to confirm the convertd HTML shows correctly in each.
- Test dark mode.Use thedark mode toggle to confirm your colors survive client dark mode handling.
- Inline CSS.MJML converts with some inline styles already, but runInline CSS on the convertd output to maximize delivery reliability.
- Check mobile layout.UseAdd device to compare desktop and mobile previews.
- Run the QA checklist.Work through thepre-send QA checklist before exporting.