@email-lint/react-email

Lint React Email components for client compatibility. Renders your component to HTML and validates it against caniemail data using @email-lint/core.

import { lintComponent } from '@email-lint/react-email';
import { Welcome } from './emails/welcome';

const result = await lintComponent(<Welcome name="Jane" />);

console.log(result.success);      // true
console.log(result.errorCount);   // 0
console.log(result.diagnostics);  // LintDiagnostic[]

Install

npm install @email-lint/react-email

Peer dependencies: react and @react-email/render.

API

lintComponent(element, config?)

Renders a React element to HTML via @react-email/render, then lints it with email-lint.

Framework-aware filtering is enabled by default — diagnostics caused by React Email internals (preview text blocks, preload image tags, forced target="_blank") are automatically suppressed. Pass framework: undefined to opt out.

// Lint against specific clients
const result = await lintComponent(<Welcome />, { preset: 'gmail' });

// Disable framework filtering
const result = await lintComponent(<Welcome />, { framework: undefined });

// Keep suppressed diagnostics visible
const result = await lintComponent(<Welcome />, { showIgnored: true });

Returns the same LintResult type as @email-lint/core — see @email-lint/core docs for the full type reference.

Use in tests

import { describe, it, expect } from 'vitest';
import { lintComponent } from '@email-lint/react-email';
import { Welcome } from './emails/welcome';

describe('email compatibility', () => {
  it('Welcome has no errors', async () => {
    const result = await lintComponent(<Welcome name="Jane" />);
    expect(result.errorCount).toBe(0);
  });

  it('Welcome passes Gmail checks', async () => {
    const result = await lintComponent(<Welcome name="Jane" />, { preset: 'gmail' });
    expect(result.success).toBe(true);
  });
});

License

MIT