MailMode Preview first. Panic less.
Docs Learn Changelog About Status Terms Privacy
← Back to Docs
Docs

Quick Start

A short path from email source to useful preview output.

For the most accurate email previews, keep important layout and colour styles inline where possible.

1. Add your email

Paste HTML directly, upload an HTML/HTM file, upload MJML, upload a React Email JSX/TSX file, or drop in a supported ZIP project. ZIP projects can include one main email file plus local image assets.

2. Preview light and dark mode

MailMode renders light and dark previews automatically once content is available. Use Authored CSS to compare your own dark mode styles, Partial Invert for selective darkening, and Full Invert for aggressive colour remapping. These simulations help highlight likely issues, but real inbox behaviour still varies.

3. Switch viewport widths

Use the viewport selector to test Mobile, Large Mobile, Tablet, Email Standard, Email Wide and Desktop. The same width is applied to both light and dark previews so comparisons stay consistent.

4. Review the health report

Start with the compact analysis summary. Open the full health report guide when you need the detailed checks for links, images, accessibility, tracking, subject/preheader copy and dark mode risks.

5. Create a shareable preview link

Use Create Shareable Link when you need someone else to review the rendered email. The hosted preview is public to anyone with the active link, expires after 3 days, and should not be used for sensitive or confidential content. See Shareable Previews for the details.

6. Export a PDF report

Use the PDF export to download a branded report containing the current preview details, summary and useful warnings.

Final QA

For important campaigns, test the finished email in the real email clients your audience uses.

© 2026 MailMode. Docs for the current MVP. Docs · Learn · Changelog · About · Status · Privacy · Terms