React Email
MailMode can preview simple static React Email templates without executing arbitrary uploaded code.
What React Email Support Means
MailMode parses a supported subset of React Email JSX/TSX and converts static component trees into approximate HTML for quick, safe QA. It does not install or execute React Email, Tailwind or your project dependencies, so its direct JSX preview can differ from HTML produced by your real build.
Safe Preview Mode
Safe mode allows static JSX layouts, standard React Email components, static string and number props, and static inline style objects. It blocks code that would require runtime execution.
Supported Static Patterns
Use standard React Email components such as Html, Body, Container, Section, Text, Link, Img and Preview. Static style objects such as style={main} can be supported when MailMode can read them safely.
Unsupported Dynamic Patterns
Dynamic features may be blocked, including .map() loops, runtime conditionals, hooks/effects, browser APIs, fetch/network calls, event handlers, dangerouslySetInnerHTML and dynamic function execution.
What To Do If Rendering Fails
Export rendered HTML from your React Email project, simplify dynamic logic for the preview template, or create a static JSX version specifically for MailMode QA. Rendered HTML is also the preferred input when exact component output, Tailwind processing, custom components or project dependencies matter. MailMode should explain what pattern was blocked rather than showing raw stack traces. For a broader dark mode workflow, read the React Email dark mode guide.
Dark-mode diagnostics
MailMode does not execute React Email or Tailwind. A dark: class in JSX is treated as authoring intent, not proof that dark CSS compiled. Paste your project’s rendered HTML to let MailMode detect the actual prefers-color-scheme output, colour-scheme declarations and client compatibility risks. Correct generated CSS can still be ignored or transformed by individual email clients.