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 { Template } from './emails/Batman';

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

import { render } from 'jsx-email';

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

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

Method Options ​

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

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

Options ​

disableDefaultStyle?: boolean;

disableDefaultStyle?: boolean;

If true, disables all of the default styles for all components for the rendering operation.

inline?: boolean;

inline?: boolean;

If true, converts any elements with CSS class names to use style attributes with the combined CSS styles from the class names on the element. This option loads the plugin-inline plugin.

minify?: boolean;

minify?: boolean;

If true, minifies the HTML for rendered templates. This option loads the plugin-minify plugin.

plainText?: boolean  | PlainTextOptions;

plainText?: boolean  | PlainTextOptions;

If true or an object, renders the target email(s) to plain text. If you 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;

If true, beautifies the HTML output for each target email. This option loads the plugin-pretty plugin.

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.