Code Fixes

Get actionable before/after code snippets to fix CSS compatibility issues, with framework-aware suggestions for React Email, MJML, and Maizzle.

getCodeFix

Returns a code fix snippet for a specific CSS property, client, and optional framework. When a framework is specified, the fix uses framework-native patterns (e.g. React Email <Row> / <Column> components instead of raw HTML tables).

function getCodeFix(
  property: string,
  clientId: string,
  framework?: Framework
): CodeFix | undefined

Parameters

Parameter	Type	Description
`property`	`string`	CSS property name (e.g. `"border-radius"`)
`clientId`	`string`	Client ID (e.g. `"outlook-windows-legacy"`)
`framework`	`Framework`	Optional: `"jsx"`, `"mjml"`, or `"maizzle"`

Resolution order

When framework is specified, the engine looks up fixes in a four-tier cascade (most specific to least specific):

property::clientPrefix::framework — e.g. "display:flex::outlook::jsx" (React Email Row/Column for Outlook)
property::framework — e.g. "display:grid::jsx" (React Email Row/Column for any client)
property::clientPrefix — e.g. "border-radius::outlook" (generic Outlook VML fix)
property — e.g. "display:grid" (generic HTML table fix)

This means you always get the most relevant fix for your stack.

Returns

interface CodeFix {
  before: string;       // Original problematic code
  after: string;        // Fixed code
  language: "html" | "css" | "jsx";
  description: string;  // What the fix does
}

Example — generic HTML fix

import { getCodeFix } from "@emailens/engine";

const fix = getCodeFix("border-radius", "outlook-windows-legacy");
console.log(fix.description);
// "Use VML to render rounded buttons in Outlook"
console.log(fix.language);
// "html"

Example — React Email fix

const fix = getCodeFix("display:flex", "outlook-windows-legacy", "jsx");
console.log(fix.description);
// "Use React Email Row + Column components instead of flexbox (Outlook-safe)"
console.log(fix.language);
// "jsx"
console.log(fix.after);
// import { Row, Column } from "@react-email/components";
// <Row>
//   <Column style={{ width: "50%", verticalAlign: "top" }}>Column 1</Column>
//   ...
// </Row>

Example — MJML fix

const fix = getCodeFix("display:flex", "outlook-windows-legacy", "mjml");
console.log(fix.description);
// "Replace flexbox with mj-section and mj-column"
console.log(fix.after);
// <mj-section>
//   <mj-column width="50%">...</mj-column>
// </mj-section>

Fixes in warnings

Code fixes are automatically attached to CSSWarning objects returned by analyzeEmail(). Pass the framework parameter to get framework-specific fix snippets:

// Generic HTML fixes
const warnings = analyzeEmail(html);

// React Email fixes
const warnings = analyzeEmail(html, "jsx");

// MJML fixes
const warnings = analyzeEmail(html, "mjml");

// Maizzle fixes
const warnings = analyzeEmail(html, "maizzle");

for (const warning of warnings) {
  if (warning.fix) {
    console.log(`Fix for ${warning.property} in ${warning.client}:`);
    console.log(`  Language: ${warning.fix.language}`);
    console.log(`  Before: ${warning.fix.before}`);
    console.log(`  After:  ${warning.fix.after}`);
  }
}

Coverage

The engine includes fix snippets for 40+ CSS properties across all 13 email clients, plus 21 framework-specific entries for React Email (JSX), MJML, and Maizzle. Properties covered include layout (flexbox, grid, float), box model (margin, padding, border-radius), backgrounds, text, and effects (shadows, opacity, transforms). The full support matrix covers 250+ CSS properties auto-synced from caniemail.com data.

Framework-specific fixes

Framework	Key fixes
React Email (`jsx`)	`Row`/`Column` for flexbox/grid, `Font` component for `@font-face`, `Img`/`Link` for media, `Container` for max-width, VML via `dangerouslySetInnerHTML`
MJML	`mj-section`/`mj-column` for layout, `mj-font` for fonts, `mj-style inline` for Gmail, `mj-breakpoint` for responsive
Maizzle	Tailwind utility classes, MSO conditional comments, `googleFonts` config, `inlineCSS` config guidance

On this page