Your First Preview

Step-by-step walkthrough of previewing an HTML email across all supported clients.

1. Prepare your email HTML

Any valid HTML email works. Here's a minimal example:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
    .container { max-width: 600px; margin: 0 auto; }
    .header { background: #8a7544; color: white; padding: 20px; border-radius: 8px; }
    .content { padding: 20px; }
    .button { display: inline-block; background: #8a7544; color: white; padding: 12px 24px; border-radius: 4px; text-decoration: none; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header"><h1>Welcome!</h1></div>
    <div class="content">
      <p>Thanks for signing up.</p>
      <a href="#" class="button">Get Started</a>
    </div>
  </div>
</body>
</html>

2. Submit via API

curl -X POST https://emailens.dev/api/preview \
  -H "Content-Type: application/json" \
  -d @- <<'EOF'
{
  "html": "<!DOCTYPE html><html>...</html>"
}
EOF

3. Read the response

The response contains:

transforms — HTML rewritten for each email client
cssReport — CSS warnings with severity and fix suggestions
compatibilityScores — 0-100 score per client
overallScore — average across all clients
darkMode — dark mode variants per client
screenshots — simulated preview URLs rendered in Chromium (when available)

{
  "id": "abc123def456",
  "overallScore": 82,
  "compatibilityScores": {
    "gmail-web": { "score": 90, "errors": 0, "warnings": 2, "info": 1 },
    "outlook-windows-legacy": { "score": 65, "errors": 2, "warnings": 3, "info": 0 }
  },
  "cssReport": [
    {
      "severity": "error",
      "client": "outlook-windows-legacy",
      "property": "border-radius",
      "message": "border-radius is not supported in Outlook Classic (Word rendering engine)",
      "suggestion": "Use VML roundrect for rounded corners in Outlook Classic"
    }
  ]
}

4. Fix issues

Each warning includes a suggestion and often a fix with before/after code:

{
  "fix": {
    "before": "border-radius: 8px;",
    "after": "/* border-radius not supported in Outlook Classic */",
    "language": "css",
    "description": "Remove border-radius for Outlook Classic compatibility"
  }
}

Use the generateFixPrompt() function from @emailens/engine to generate an LLM-ready prompt for automated fixing.

Framework-aware fixes

If you're using React Email, MJML, or Maizzle, add a format field to your request to get framework-specific fix snippets:

curl -X POST https://emailens.dev/api/preview \
  -H "Content-Type: application/json" \
  -d '{
    "html": "...",
    "format": "jsx"
  }'

Valid formats: "html" (default), "jsx", "mjml", "maizzle". Fix suggestions will use your framework's native patterns — for example, React Email <Row>/<Column> components instead of raw HTML tables.

5. Filter by client

Only check specific clients by passing the clients array:

curl -X POST https://emailens.dev/api/preview \
  -H "Content-Type: application/json" \
  -d '{
    "html": "...",
    "clients": ["gmail-web", "outlook-windows", "apple-mail-macos"]
  }'