Render ​

Render JSX email components to HTML email

Install ​

Install the package from your command line

pnpm add jsx-email

pnpm add jsx-email

bun add jsx-email

bun add jsx-email

npm add jsx-email

npm add jsx-email

yarn add jsx-email

yarn add jsx-email

Usage ​

import { render } from 'jsx-email';

import { BatmanTemplate } from './emails/Batman';

const html = await render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);

import { render } from 'jsx-email';

import { BatmanTemplate } from './emails/Batman';

const html = await render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);

Method Options ​

export interface Options {
  minify?: boolean;
  plainText?: boolean | PlainTextOptions;
  pretty?: boolean;
}

export interface Options {
  minify?: boolean;
  plainText?: boolean | PlainTextOptions;
  pretty?: boolean;
}

Options ​

minify?: boolean;

minify?: boolean;

Minify the HTML for rendered templates

plainText?: boolean  | PlainTextOptions;

plainText?: boolean  | PlainTextOptions;

If true or an object, renders the target email(s) to plain text. If the need to modify how the target is rendered to plain text, an object representing html-to-text options should be used.

pretty?: boolean;

pretty?: boolean;

Beautify the HTML output for each target email

Debugging ​

The rendered HTML can often be difficult to trace or match back to the JSX source template. To make things easier, users can enable a debugging flag which will output jsx-email-specific data-type attributes in the HTML. To enable this, set an environment variable like so: DEBUG=jsx-email:elements.

Users may also wish to pass the { minify: false } option to the render method.