Docs
Learn how to preview emails, understand MailMode reports and share temporary previews safely.
Quick Start
Paste or upload an email, preview it in light and dark mode, then use the optional checks when you need more detail.
- Upload HTML, MJML, React Email or ZIP projects.
- Preview light and dark mode side by side.
- Switch viewport widths for Mobile, Large Mobile, Tablet, Email Standard, Email Wide and Desktop views.
- Create temporary share links and export PDF reports.
Supported Formats
MailMode supports the formats most email developers are likely to test during everyday QA.
- HTML and HTM email files.
- MJML files rendered before previewing.
- Static React Email JSX/TSX templates in safe mode.
- ZIP email projects with local image assets.
Rendering Status
The small status pill explains whether MailMode is waiting, working, successful, or needs attention.
- Grey means no email or a neutral state.
- Purple means MailMode is processing something.
- Green means the action completed successfully.
- Amber means the flow needs attention, such as a blocked URL or renderer issue.
Health Report
The health report highlights practical risks in your email without overwhelming the preview.
- Accessibility and contrast checks.
- Link, image and tracking analysis.
- Subject and preheader preview checks.
- Dark mode and rendering risk warnings.
MJML
MailMode compiles MJML before previewing the rendered email output and running checks.
- Paste MJML or upload an .mjml file.
- Use MJML files inside ZIP projects.
- Review supported tags and current renderer limits.
- Check the compiled HTML across MailMode preview modes.
React Email
MailMode safely previews supported static React Email templates without executing uploaded code.
- Use supported static JSX and TSX patterns.
- Understand safe preview mode.
- Identify unsupported dynamic behaviour.
- Export rendered HTML when a template needs runtime logic.
Changelog
MailMode is moving quickly, with recent work focused on previews, reporting, sharing and docs.
- Initial public release notes.
- Recent feature additions and improvements.
- Known limitations and supported formats.
- A short Coming Next section for planned improvements.