Render

Render JSX email components to HTML email

pnpm

aube

bun

npm

yarn

pnpm add jsx-email

Peer Dependencies

@jsx-email/plugin-inline, @jsx-email/plugin-minify, and @jsx-email/plugin-pretty are peer dependencies of jsx-email. Package managers that automatically install peer dependencies will install them for you. If you disable peer dependency auto-installation, install the plugin packages manually before using inlineCss, minify, or pretty.

Usage

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;
}

Options

disableDefaultStyle?: boolean;

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

inlineCss?: 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;

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

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;

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.