Skip to content

## Render ​

Render JSX email components to HTML email

## Install ​

Install the package from your command line

pnpmbunnpmyarn
console

    pnpm add jsx-email

    pnpm add jsx-email

console

    bun add jsx-email

    bun add jsx-email

console

    npm add jsx-email

    npm add jsx-email

console

    yarn add jsx-email

    yarn add jsx-email

## Usage ​

jsx

    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 ​

ts

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

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

### Options ​

ts

    minify?: boolean;

    minify?: boolean;

Minify the HTML for rendered templates

ts

    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.

ts

    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.