Preview Tool
How to use the Emailens preview editor to test HTML emails across clients.
Using the editor
- Navigate to emailens.dev
- Paste your HTML email source into the editor panel
- Click Preview to run the analysis
The preview tool accepts:
- Raw HTML — paste any HTML email source directly
- React Email JSX — automatically compiled to HTML before analysis
- MJML — automatically compiled to HTML before analysis
- Maizzle — Tailwind CSS compiled and inlined before analysis
Understanding results
After submitting, you'll see:
Compatibility scores
Each client gets a score from 0 to 100 based on CSS support analysis:
- 90-100 — Excellent. Minor or no rendering differences
- 70-89 — Good. Some visual differences, mostly cosmetic
- 50-69 — Fair. Noticeable layout or styling issues
- Below 50 — Poor. Significant rendering problems
CSS warnings
Warnings are grouped by severity:
| Severity | Meaning |
|---|---|
error | Property is completely unsupported — layout will break |
warning | Property is partially supported — visual differences likely |
info | Property is supported but behaves differently in this client |
Each warning includes a code fix suggestion showing the before/after change. When you submit React Email JSX, MJML, or Maizzle, fix snippets use your framework's native patterns (e.g. <Row>/<Column> components for React Email instead of raw HTML tables).
Client tabs
Switch between clients using the tabs to see per-client transformed HTML, dark mode variants, and simulated screenshots. Screenshots are rendered in Chromium with client-specific CSS transforms applied — actual rendering in native email clients may differ slightly.
Input formats
React Email
If your source contains JSX/TSX syntax (detected automatically), Emailens compiles it to HTML using React Email's render pipeline before running the analysis.
MJML
If your source starts with <mjml>, Emailens compiles it using the MJML compiler before analysis.
Maizzle
Maizzle templates are compiled through the Maizzle build pipeline (Tailwind CSS + juice inlining) before analysis.
Framework-aware fixes
When submitting React Email, MJML, or Maizzle source, the code fix suggestions are tailored to your framework. For example, a flexbox warning in Outlook will suggest <Row>/<Column> components for React Email, <mj-section>/<mj-column> for MJML, or Tailwind classes with MSO conditionals for Maizzle.