Render

Render JSX email components to HTML email

Install

Install the package from your command line

pnpm

pnpm add jsx-email

bun

bun add jsx-email

npm

npm add jsx-email

yarn

yarn add jsx-email

Usage

Convert JSX email templates to HTML:

import { render } from 'jsx-email';
import { Template } from './emails/Batman';

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

Options

The render method accepts these options:

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

disableDefaultStyle (optional)

Disable default component styles:

disableDefaultStyle?: boolean;

When true, removes all default styles from components during rendering.

inline (optional)

Convert class-based styles to inline styles:

inline?: boolean;

When true, converts CSS classes to inline style attributes. Uses plugin-inline.

minify (optional)

Minify output HTML:

minify?: boolean;

When true, compresses the HTML output. Uses the plugin-minify plugin.

plainText (optional)

Generate plain text version:

plainText?: boolean | PlainTextOptions;

Options:

• true: Generates plain text version
• object: Customize conversion using html-to-text options

pretty (optional)

Beautify output HTML:

pretty?: boolean;

When true, formats HTML for readability. Uses the plugin-pretty plugin.

Development

Debugging

To debug template rendering:

1. Enable debugging attributes by setting the DEBUG environment variable:

   .env

   DEBUG=jsx-email:elements

2. Disable minification in render options:

   await render(template, { minify: false });

This adds data-type attributes to HTML elements for easier template tracing.