Editor

Getting Started

Email Preview helps you see how your HTML or React Email code will render in Gmail before you send it. Gmail applies CSS transformations that can break your email design. Prevent issues without needing to manually send the email.

Quick Start

Paste your email HTML or TSX code in the editor
The preview updates automatically
Check the assessment panel for compatibility issues

Input Modes

The tool supports two input formats: HTML and TSX (React Email). The type is auto-detected based on your code.

HTMLStandard HTML

Raw HTML with inline styles

TSXReact Email

React components compiled to HTML

Use the editor toolbar buttons to clear, copy, or paste content.

Example Templates

Use the "Load an example" dropdown to explore different email patterns.

HTML

Best practice · Style in body · Unsupported CSS

TSX

Welcome Email · With Tailwind · With Props

Gmail Simulation

The simulator applies transformations that mimic how Gmail processes email HTML.

Strips <style> in body

Only <head> styles supported

Removes <link> stylesheets

External CSS not allowed

Filters CSS properties

position, flex, grid removed

Detects size clipping

Emails over 102KB are truncated

Understanding Results

The assessment panel shows an overall verdict for your email along with individual issues found during analysis. Issues are grouped by category and sorted by severity.

Overall Verdict

Based on the most severe issue found

✓ OKNo issues detected

⚠ WarningMay cause issues in some situations

✕ ErrorWill cause visible problems

Issue Severities

ErrorVisible problems

WarningMay cause issues

InfoNon-breaking

Issue Categories

<style> — Style blocks removed entirely
CSS Properties — Unsupported properties filtered
CSS Values — Unsupported values filtered
CSS Selectors — Attribute selectors not supported
Media Queries — Unsupported query types filtered
<link> — External stylesheets removed
Email Size — Clipping detection (102KB limit)
Images — Download overlay and spacing issues
Text Content — Auto-linking of URLs and emails

TSX Compilation

React Email code is compiled to HTML on the server using a sandboxed environment.

Supported Imports

@react-email/*react

Sandbox Limitations

50KB max — code size limit
5 second timeout — execution time limit
No file access — relative imports are stripped
No custom packages — only pre-bundled imports work