A web application for testing email HTML compatibility across major email clients.
- Live HTML Preview - See your email render in real-time as you type
- CSS Compatibility Analysis - Automatically detects CSS properties used and checks support across email clients
- Caniemail Integration - Powered by caniemail.com data for accurate compatibility information
- Detailed Reports - View which clients support (or don't support) each CSS feature you use
- Expandable Details - Click any issue to see the full caniemail embed with support matrix
The compatibility report checks against these major email clients:
- Gmail (Web)
- Outlook Windows
- Outlook Mac
- Outlook.com
- Apple Mail (macOS)
- iOS Mail
- Yahoo Mail
- Samsung Email
- Node.js 22
- npm or pnpm
# Clone the repository
git clone https://github.com/domhhv/email-previewer.git
cd email-previewer
# Install dependencies
npm install
# or
pnpm install
# Start the development server
npm run dev
# or
pnpm devOpen http://localhost:3000 in your browser.
├── app/
│ └── page.tsx # Main page component
├── components/
│ ├── email-content-input.tsx # HTML textarea input
│ ├── email-content-preview.tsx # Sandboxed iframe preview
│ └── compatibility-report.tsx # Issues list with caniemail embeds
├── lib/
│ ├── caniemail.ts # Caniemail API types and utilities
│ └── css-extractor.ts # CSS property extraction from HTML
- Input - User pastes email HTML into the textarea
- CSS Extraction - The
css-extractorparses the HTML to find all CSS properties used (from both inline styles and<style>tags) - Compatibility Check - Each CSS property is matched against caniemail.com's database of email client support
- Report Generation - Issues are categorized by severity:
- 🔴 Error - Property not supported in one or more major clients
- 🟡 Warning - Partial support (may work with limitations)
- 🟢 Success - Fully supported across all major clients
- Detail View - Clicking an issue reveals the caniemail embed with the full support matrix
-
Iframe-based preview - Uses
srcdocwith strict sandboxing for security. This shows how the email renders in a modern browser, not specific email clients. -
PostCSS-based CSS extraction - Uses PostCSS with safe-parser for robust CSS parsing, handling nested rules, @-rules, and malformed CSS gracefully.
-
Client-side analysis - All processing happens in the browser. The caniemail data is fetched once and cached.
-
Debounced updates - HTML changes are debounced by 300ms to avoid excessive re-analysis while typing.
This tool provides compatibility analysis, not true email client rendering. Here's what it can and cannot do:
| ✅ Can Do | ❌ Cannot Do |
|---|---|
| Identify unsupported CSS properties | Show pixel-perfect rendering per client |
| Show caniemail support data | Simulate Gmail's CSS preprocessing |
| Preview in browser rendering | Simulate Outlook's Word engine |
| Parse inline and embedded styles | Parse external stylesheets |
For true cross-client preview screenshots, commercial tools like Litmus or Email on Acid are required—they maintain farms of actual email clients.
- CodeMirror Editor - Syntax highlighting and better editing experience
- HTML Element Checking - Detect unsupported HTML tags and attributes
- Advanced CSS Parsing - Use PostCSS for more accurate CSS extraction
- Simulated Client Views - Apply known CSS transforms per client (Gmail stripping, Outlook restrictions)
- React Email Support - Compile
.tsxfiles using@react-email/render - Dark Mode Preview - Toggle to simulate dark mode rendering
- Export Report - Download compatibility report as PDF/JSON
- URL Sharing - Share email + report via URL
- Next.js 16 - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- PostCSS - CSS parsing
- caniemail.com - Compatibility data
Dominik Hryshaiev - LinkedIn · GitHub
MIT
- caniemail.com for their comprehensive email client support data