TypeScript Types

All types are exported from @emailens/engine:

import type {
  EmailClient,
  CSSWarning,
  CodeFix,
  Framework,
  InputFormat,
  TransformResult,
  PreviewResult,
  DiffResult,
  SupportLevel,
  ExportPromptOptions,
  ExportScope,
} from "@emailens/engine";

SupportLevel

type SupportLevel = "supported" | "partial" | "unsupported" | "unknown";

Represents how well a CSS property is supported in a given email client.

Framework

type Framework = "jsx" | "mjml" | "maizzle";

Identifies a source framework. Used by analyzeEmail() and getCodeFix() to return framework-specific fix snippets instead of generic HTML/CSS fixes.

Value	Framework
`"jsx"`	React Email — fixes use `Row`, `Column`, `Font`, `Img` components
`"mjml"`	MJML — fixes use `mj-section`, `mj-column`, `mj-font` elements
`"maizzle"`	Maizzle — fixes use Tailwind classes and config guidance

InputFormat

type InputFormat = "html" | Framework;

The format of the email source submitted to the API. "html" means raw HTML (no compilation needed). The other values trigger server-side compilation before analysis.

EmailClient

interface EmailClient {
  id: string;             // Unique identifier (e.g. "gmail-web")
  name: string;           // Display name (e.g. "Gmail")
  category: "webmail" | "desktop" | "mobile";
  engine: string;         // Rendering engine name
  darkModeSupport: boolean;
  icon: string;           // Lucide icon name
}

CSSWarning

interface CSSWarning {
  severity: "error" | "warning" | "info";
  client: string;         // Client ID
  property: string;       // CSS property name
  message: string;        // Human-readable description
  suggestion?: string;    // How to fix it
  fix?: CodeFix;          // Before/after code snippet
  line?: number;          // Line number in source HTML
  selector?: string;      // CSS selector where issue found
}

CodeFix

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

The language field indicates the syntax of the snippet. When the framework parameter is "jsx", JSX-specific fixes use language: "jsx" for proper syntax highlighting. MJML and Maizzle fixes use language: "html" since their syntax is HTML-based.

TransformResult

interface TransformResult {
  clientId: string;       // Client ID
  html: string;           // Transformed HTML for this client
  warnings: CSSWarning[]; // Warnings specific to this transform
}

PreviewResult

interface PreviewResult {
  id: string;             // Unique preview ID
  originalHtml: string;   // The original input HTML
  transforms: TransformResult[];
  cssReport: CSSWarning[];
  createdAt: string;      // ISO timestamp
}

DiffResult

interface DiffResult {
  clientId: string;
  scoreBefore: number;    // Previous score
  scoreAfter: number;     // New score
  scoreDelta: number;     // Change (positive = improved)
  fixed: CSSWarning[];    // Warnings that were resolved
  introduced: CSSWarning[]; // New warnings
  unchanged: CSSWarning[]; // Warnings still present
}

ExportPromptOptions

interface ExportPromptOptions {
  originalHtml: string;
  warnings: CSSWarning[];
  scores: Record<string, {
    score: number;
    errors: number;
    warnings: number;
    info: number;
  }>;
  scope: ExportScope;
  selectedClientId?: string;
  format?: "html" | "jsx" | "mjml" | "maizzle";
}

type ExportScope = "all" | "current";

The format field controls framework-specific instructions in the generated LLM prompt. When set to "jsx", "mjml", or "maizzle", the prompt includes guidance specific to that framework.

On this page