Core Concepts

Email clients

An email client is a combination of platform and rendering engine. Emailens supports 13 clients across webmail, desktop, and mobile categories.

Each client has different CSS support. For example:

• Gmail strips most <style> blocks and forces inline styles
• Outlook Classic uses the Microsoft Word rendering engine, which doesn't support border-radius, flexbox, or grid. The new Outlook for Windows uses a modern web engine with much better CSS support.
• Apple Mail uses WebKit and supports most modern CSS

Transforms

A transform takes your HTML and rewrites it for a specific email client. This includes:

• Inlining styles (for clients that strip <style> blocks)
• Removing unsupported properties
• Adding client-specific fallbacks
• Converting units and values

The result is client-specific HTML that simulates how the email will render. Previews are rendered in Chromium and may differ slightly from native client rendering.

Warnings

A CSS warning flags a compatibility issue. Each warning has:

• severity: error (won't render), warning (degraded), or info (minor)
• client: which client is affected
• property: the CSS property causing the issue
• message: human-readable description
• suggestion: how to fix it
• fix: before/after code snippet (when available)

Compatibility score

Each client gets a 0-100 score based on the warnings found:

• Errors have the highest impact
• Warnings reduce the score moderately
• Info issues have minimal impact

The overall score is the average across all clients.

Dark mode

Emailens simulates how email clients render your email in dark mode. Clients that support dark mode may:

• Invert background and text colors
• Override explicit colors with system defaults
• Apply prefers-color-scheme: dark media queries

Dark mode simulation produces a separate HTML variant and additional warnings specific to dark mode rendering.

Input formats

Emailens accepts four input formats:

Set the format field in your API request to use JSX, MJML, or Maizzle. The response includes the compiledHtml field with the intermediate HTML.

Framework-aware fixes

When you specify a format, CSS warnings include framework-specific fix snippets instead of generic HTML. For example, a display:flex warning in Outlook returns:

• HTML: a <table> with <!--[if mso]> conditional comments
• React Email (jsx): <Row> and <Column> components from @react-email/components
• MJML: <mj-section> and <mj-column> elements
• Maizzle: Tailwind utility classes with MSO conditional comments

This means fix suggestions are always in your source language — you can paste them directly into your code.