React Email
Preview React Email components with Emailens — submit JSX directly and get framework-aware fix snippets.
Emailens can compile React Email components server-side and preview the resulting HTML across all email clients.
API usage
Set format: "jsx" in your API request:
curl -X POST https://emailens.dev/api/preview \
-H "Content-Type: application/json" \
-H "Authorization: Bearer ek_your_api_key" \
-d '{
"format": "jsx",
"html": "import { Html, Head, Body, Container, Text } from \"@react-email/components\";\nexport default function Email() {\n return (\n <Html>\n <Head />\n <Body style={{ fontFamily: \"Arial\" }}>\n <Container>\n <Text>Hello from React Email!</Text>\n </Container>\n </Body>\n </Html>\n );\n}"
}'The response includes a compiledHtml field with the generated HTML, plus all the usual transforms, warnings, and scores.
Framework-aware fix snippets
When you set format: "jsx", all CSS warnings include React Email-specific fix snippets. Instead of generic HTML tables and VML, you get idiomatic React Email patterns:
| Problem | Generic HTML fix | React Email fix |
|---|---|---|
| Flexbox in Outlook | <table> with <!--[if mso]> | <Row> + <Column> components |
| CSS Grid | <table> layout | <Row> + <Column> components |
@font-face | Web-safe font stack | <Font> component in <Head> |
<svg> | <img> replacement | <Img> component |
<video> | Linked thumbnail | <Img> + <Link> components |
max-width in Outlook | MSO conditional table wrapper | <Container> component |
border-radius in Outlook | VML <v:roundrect> | dangerouslySetInnerHTML with VML |
gap property | Padding on <td> elements | paddingRight on <Column> |
<style> in Gmail | Inline CSS | style={{ }} props |
<link> stylesheet | Inline <style> block | <Head> component |
How it works
- Your JSX string is received by the API
- Emailens compiles it using
@react-email/renderserver-side - The resulting HTML is passed through the full preview pipeline
- Warnings include React Email-specific before/after fix snippets (language:
"jsx") - You get back transforms, warnings, scores, dark mode variants, and screenshots
Engine usage
When using @emailens/engine directly, pass "jsx" as the framework parameter:
import { analyzeEmail, getCodeFix } from "@emailens/engine";
// Get React Email fix snippets in all warnings
const warnings = analyzeEmail(compiledHtml, "jsx");
// Or look up a specific fix
const fix = getCodeFix("display:flex", "outlook-windows-legacy", "jsx");
console.log(fix.after);
// import { Row, Column } from "@react-email/components";
// <Row>
// <Column>...</Column>
// </Row>Error handling
If compilation fails, you get a 422 response with details:
{
"error": "Failed to compile React Email component.",
"phase": "transform"
}The phase field indicates whether the error occurred during JSX transformation (transform) or HTML rendering (render).