open-index/open-npm huggingface dataset:
npm package: @jsx-email/all
Description: A package containing all available JSX email components 
Latest version: 3.0.1
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/all
[npm-url]: https://www.npmjs.com/package/@jsx-email/all

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/all

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A package containing all available JSX email components
<div><br>

Please see the [Documentation](https://jsx.email) for information on how to use individual components.

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/all

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/all
# yarn add @jsx-email/all
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Heading } from '@jsx-email/all';

const Email = () => {
  return <Heading as="h1">Lorem ipsum</Heading>;
};
```

Please see the [`@jsx-email/all` Documentation](https://jsx.email/docs/components/all) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/body
Description: A JSX email component for using a React `Body` component to wrap email content
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/body
[npm-url]: https://www.npmjs.com/package/@jsx-email/body

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/body

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component for using a React `Body` component to wrap email content
<div><br>

[`@jsx-email/body` Documentation](https://jsx.email/docs/components/body)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

<div>
  <br/>
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/clients.svg" alt="JSX email"><br/>
  Compatible with all modern email services
  <br/><br/>
</div>

## Install

```shell
$ pnpm add @jsx-email/$1

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/$1
# yarn add @jsx-email/$1
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Html } from '@jsx-email/html';
import { Body } from '@jsx-email/body';
import { Column } from '@jsx-email/column';
import { Section } from '@jsx-email/section';

const Email = () => {
  return (
    <Html lang="en">
      <Body style={{ backgroundColor: '#61dafb' }}>
        <Section>
          <Column style={{ width: '50%' }}>{/* First column */}</Column>
          <Column style={{ width: '50%' }}>{/* Second column */}</Column>
        </Section>
      </Body>
    </Html>
  );
};
```

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/button
Description: A JSX email component which styles an anchor element to appear as a button
Latest version: 1.0.4
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/button
[npm-url]: https://www.npmjs.com/package/@jsx-email/button

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/button

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which styles an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) to appear as a button
<div><br>

[`@jsx-email/button` Documentation](https://jsx.email/docs/components/button)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/button

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/button
# yarn add @jsx-email/button
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Button } from '@jsx-email/button';

const Email = () => {
  return (
    <Button href="https://example.com" style={{ color: '#61dafb', padding: '10px 20px' }}>
      Click me
    </Button>
  );
};
```

Please see the [`@jsx-email/button` Documentation](https://jsx.email/docs/components/button) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/cli
Description: A CLI for working with Email Templates made with jsx-email
Latest version: 3.0.1
Deprecated: The project has moved to a single package. Please install jsx-email for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/cli
[npm-url]: https://www.npmjs.com/package/@jsx-email/cli

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/cli

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  The Command Line Interface and developer tooling for JSX email.
<div><br>

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/cli -D

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/cli -D
# yarn add @jsx-email/cli -D
```

Nearly all installations of this package will want it installed into `devDependencies` so please make sure to add the `-D` flag.

## Usage

Installing this package will add an `email` binary, which will be available to `pnpm exec`, `npx`, and `yarn`.

Invoking the CLI without parameters or flags will produce help information in the console. From there, all of the functions of the CLI can be viewed, along with any applicable parameters and flags:

```console
→ pnpm exec email

@jsx-email/cli v0.0.0

A CLI for working with Email Templates made with jsx-email

Usage
  $ email [...options]

Commands
  build       <template path>
  help        [<command>]
  preview     <template dir path>

Options
  --help      Displays this message
  --version   Displays webpack-nano and webpack versions

Examples
  $ email
  $ email --help
  $ email build ./src/templates/Invite.tsx
  $ email create invite
  $ email preview ./src/templates
```

For more documentation and information using the CLI, please review our [Documentation](https://jsx.email/docs/core/cli)

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/code
Description: A JSX email component which displays a syntax-highlighted code block using https://shiki.matsu.io/
Latest version: 0.1.0
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/code
[npm-url]: https://www.npmjs.com/package/@jsx-email/code

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/code

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which displays a syntax-highlighted code block using <a href="https://shiki.matsu.io/">Shiki</a>
<div><br>

[`@jsx-email/code` Documentation](https://jsx.email/docs/components/code)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/code

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/code
# yarn add @jsx-email/code
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { getCode } from '@jsx-email/code';

const Code = await getCode({ language: 'js', theme: 'nord' });

const Email = () => {
  return (
    <Code>
      {`
      import { batman } from 'superheros';
      import { joker } from 'villains';

      const henchmen = joker.help();

      batman.fight(henchmen);
      batman.arrest(joker);
    `}
    </Code>
  );
};
```

Please see the [`@jsx-email/code` Documentation](https://jsx.email/docs/components/code) for props and additional usage information.

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/column
Description: A JSX email component which displays columns that separate content bounaries vertically
Latest version: 1.0.3
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/column
[npm-url]: https://www.npmjs.com/package/@jsx-email/column

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/column

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which displays columns that separate content bounaries vertically
<div><br>

[`@jsx-email/column` Documentation](https://jsx.email/docs/components/column)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/column

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/column
# yarn add @jsx-email/column
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Row } from '@jsx-email/row';
import { Column } from '@jsx-email/column';
const Email = () => {
  return(
    <Row>
      <Column>A<Column/>
      <Column>B<Column/>
      <Column>C<Column/>
    </Row>
  );
};
```

Please see the [`@jsx-email/column` Documentation](https://jsx.email/docs/components/column) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/container
Description: A JSX email component which horizontally centers content
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/container
[npm-url]: https://www.npmjs.com/package/@jsx-email/container

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/container

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which horizontally centers content
<div><br>

[`@jsx-email/container` Documentation](https://jsx.email/docs/components/container)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/container

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/container
# yarn add @jsx-email/container
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Button } from '@jsx-email/button';
import { Container } from '@jsx-email/container';

const Email = () => {
  return (
    <Container>
      <Button href="https://example.com" style={{ color: '#61dafb' }}>
        Click me
      </Button>
    </Container>
  );
};
```

Please see the [`@jsx-email/container` Documentation](https://jsx.email/docs/components/container) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/doiuse-email
Description: Lint CSS for email support against caniemail database.
Author: Leon Si
Latest version: 1.0.4

[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

# @jsx-email/doiuse-email

This package is a part of the [`jsx-email`](https://jsx.email) suite of tools.

`@jsx-email/doiuse-email` is a tool for checking the HTML and CSS support of various email clients based on [Can I email](https://caniemail.com).

Inspired by the excellent [doiuse](https://github.com/anandthakker/doiuse) library.

## Installation

Install the package from npm using your favourite package manager:

```shell
npm install @jsx-email/doiuse-email
```

## Programmatic Usage

Import it and run it by calling `doIUseEmail(html: string, options: DoIUseOptions)`:

```typescript
import { doIUseEmail } from '@jsx-email/doiuse-email';

const result = doIUseEmail(
  `
  <!doctype html>
  <html>
    <body>
      <div style='background-color: orange'></div>
    </body>
  </html>
  `,
  { emailClients: ['gmail.*'] }
);

console.log(result);
/*
  {
    "notes": [
      "Note about `<body> element` support for `gmail.desktop-webmail`: Partial. Replaced by a `<div>` with supported attributes.",
      "Note about `<body> element` support for `gmail.ios`: Partial. Replaced by a `<div>` with supported attributes.",
      "Note about `<body> element` support for `gmail.android`: Partial. Replaced by a `<div>` with supported attributes.",
      "Note about `<body> element` support for `gmail.mobile-webmail`: Partial. Replaced by a `<div>` with supported attributes.",
    ],
    "success": true,
  }
*/

// Output is based on https://caniemail.com
```

## API

### doIUseEmail(html, options)

#### html

Type: `string`

The HTML that represents the email.

#### options

##### emailClients

Type: `string[]`

An array of globs for matching email clients to be checked against the Can I Email database. For more information about the glob syntax that is used, refer to the [micromatch](https://www.npmjs.com/package/micromatch) package.

Possible email clients:

```javascript
[
  'apple-mail.macos',
  'apple-mail.ios',
  'gmail.desktop-webmail',
  'gmail.ios',
  'gmail.android',
  'gmail.mobile-webmail',
  'orange.desktop-webmail',
  'orange.ios',
  'orange.android',
  'outlook.windows',
  'outlook.windows-mail',
  'outlook.macos',
  'outlook.ios',
  'outlook.android',
  'yahoo.desktop-webmail',
  'yahoo.ios',
  'yahoo.android',
  'aol.desktop-webmail',
  'aol.ios',
  'aol.android',
  'samsung-email.android',
  'sfr.desktop-webmail',
  'sfr.ios',
  'sfr.android',
  'thunderbird.macos',
  'protonmail.desktop-webmail',
  'protonmail.ios',
  'protonmail.android',
  'hey.desktop-webmail',
  'mail-ru.desktop-webmail',
  'fastmail.desktop-webmail',
  'laposte.desktop-webmail'
];
```

Example: `["gmail.*", "*.desktop-webmail"]`
npm package: @jsx-email/font
Description: A JSX email component which sets up custom fonts for use in email
Latest version: 1.0.3
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/font
[npm-url]: https://www.npmjs.com/package/@jsx-email/font

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/font

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which sets up custom fonts for use in email
<div><br>

[`@jsx-email/font` Documentation](https://jsx.email/docs/components/font)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/font

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/font
# yarn add @jsx-email/font
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Html } from '@jsx-email/html';
import { Head } from '@jsx-email/head';
import { Font } from '@jsx-email/font';

const Email = () => {
  return (
    <Html lang="en">
      <Head>
        <Font
          fallbackFontFamily="Verdana"
          fontFamily="Roboto"
          webFont={{
            url: 'https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2',
            format: 'woff2'
          }}
        />
      </Head>
    </Html>
  );
};
```

Please see the [`@jsx-email/font` Documentation](https://jsx.email/docs/components/font) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/head
Description: A JSX email component which creates an HTML head element
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/head
[npm-url]: https://www.npmjs.com/package/@jsx-email/head

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/head

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which creates an HTML head element
<div><br>

[`@jsx-email/head` Documentation](https://jsx.email/docs/components/head)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/head

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/head
# yarn add @jsx-email/head
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Head } from '@jsx-email/head';

const Email = () => {
  return (
    <Head>
      <title>My email title</title>
    </Head>
  );
};
```

Please see the [`@jsx-email/head` Documentation](https://jsx.email/docs/components/head) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/heading
Description: A JSX email component which creates a stylable heading element
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/heading
[npm-url]: https://www.npmjs.com/package/@jsx-email/heading

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/heading

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which creates a stylable heading (h1, h2, etc) element
<div><br>

[`@jsx-email/heading` Documentation](https://jsx.email/docs/components/heading)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/heading

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/heading
# yarn add @jsx-email/heading
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Heading } from '@jsx-email/heading';

const Email = () => {
  return <Heading as="h1">Lorem ipsum</Heading>;
};
```

Please see the [`@jsx-email/heading` Documentation](https://jsx.email/docs/components/heading) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/hr
Description: A JSX email component which creates divider that separates content
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/hr
[npm-url]: https://www.npmjs.com/package/@jsx-email/hr

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/hr

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which creates divider (horizontal rule) that separates content
<div><br>

[`@jsx-email/hr` Documentation](https://jsx.email/docs/components/hr)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/hr

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/hr
# yarn add @jsx-email/hr
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Hr } from '@jsx-email/hr';

const Email = () => {
  return <Hr />;
};
```

Please see the [`@jsx-email/hr` Documentation](https://jsx.email/docs/components/hr) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/html
Description: A JSX email component which wraps the email document with a root element
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/html
[npm-url]: https://www.npmjs.com/package/@jsx-email/html

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/html

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which wraps the email document with a root element
<div><br>

[`@jsx-email/html` Documentation](https://jsx.email/docs/components/html)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/html

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/html
# yarn add @jsx-email/html
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Button } from '@jsx-email/button';
import { Html } from '@jsx-email/html';

const Email = () => {
  return (
    <Html lang="en">
      <Button href="https://example.com" style={{ color: '#61dafb' }}>
        Click me
      </Button>
    </Html>
  );
};
```

Please see the [`@jsx-email/html` Documentation](https://jsx.email/docs/components/html) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/img
Description: A JSX email component which displays an image
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/img
[npm-url]: https://www.npmjs.com/package/@jsx-email/img

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/img

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which displays an image
<div><br>

[`@jsx-email/img` Documentation](https://jsx.email/docs/components/img)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/img

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/img
# yarn add @jsx-email/img
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Img } from '@jsx-email/img';

const Email = () => {
  return <Img src="cat.jpg" alt="Cat" width="300" height="300" />;
};
```

Please see the [`@jsx-email/img` Documentation](https://jsx.email/docs/components/img) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/link
Description: A JSX email component which renders a hyperlink to an external resource
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/link
[npm-url]: https://www.npmjs.com/package/@jsx-email/link

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/link

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which renders a hyperlink to an external resource
<div><br>

[`@jsx-email/link` Documentation](https://jsx.email/docs/components/link)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/link

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/link
# yarn add @jsx-email/link
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Link } from '@jsx-email/link';

const Email = () => {
  return <Link href="https://example.com">Example</Link>;
};
```

Please see the [`@jsx-email/link` Documentation](https://jsx.email/docs/components/link) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/markdown
Description: A JSX email component which converts markdown input to valid HTML for email
Latest version: 2.0.4
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/markdown
[npm-url]: https://www.npmjs.com/package/@jsx-email/markdown

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/markdown

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which converts markdown input to valid HTML for email
<div><br>

[`@jsx-email/markdown` Documentation](https://jsx.email/docs/components/markdown)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/markdown

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/markdown
# yarn add @jsx-email/markdown
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Markdown } from "@jsx-email/markdown";
import { Html } from "@jsx-email/html";

const Email = () => {
  return (
    <Html lang="en" dir="ltr">
      <Markdown
        markdownCustomStyles={{
          h1: { color: "red" },
          h2: { color: "blue" },
          codeInline: { background: "grey" },
        }}
        markdownContainerStyles={{
          padding: "12px",
          border: "solid 1px black",
        }}
      >{`# Hello, World!`}</Markdown>

      {/* OR */}

      <Markdown children={`# This is a ~~strikethrough~~`} />
    </Html>
  );
```

Please see the [`@jsx-email/markdown` Documentation](https://jsx.email/docs/components/markdown) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/plugin-inline
Description: A plugin for jsx-email that inlines CSS classes to style attributes
Author: Andrew Powell
Latest version: 1.0.1

[npm]: https://img.shields.io/npm/v/@jsx-email/plugin-inline
[npm-url]: https://www.npmjs.com/package/@jsx-email/plugin-inline

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"/><br/><br/>
</div>

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub" class="brackets" />
  <svg xmlns="http://www.w3.org/2000/svg" height="20" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="brackets">
    <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
  </svg>
  JSX email provides a set of React components and helpers for building delightful and responsive email templates, compatible with modern email clients.
  <br/><br/>
  The components handle the heavy lifting of compatibility and client inconsistency so designers and developers can focus on building impactful and engaging templates.
  <br/>
</div>

## Inline Plugin

This is a core `jsx-email` plugin. Please see the [documentation for this plugin](https://jsx.email/docs/plugins/inline) for more information.

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/plugin-minify
Description: A minify plugin for jsx-email
Author: Andrew Powell
Latest version: 1.0.2

[npm]: https://img.shields.io/npm/v/@jsx-email/plugin-minify
[npm-url]: https://www.npmjs.com/package/@jsx-email/plugin-minify

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"/><br/><br/>
</div>

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub" class="brackets" />
  <svg xmlns="http://www.w3.org/2000/svg" height="20" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="brackets">
    <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
  </svg>
  JSX email provides a set of React components and helpers for building delightful and responsive email templates, compatible with modern email clients.
  <br/><br/>
  The components handle the heavy lifting of compatibility and client inconsistency so designers and developers can focus on building impactful and engaging templates.
  <br/>
</div>

## Minify Plugin

This is a core `jsx-email` plugin. Please see the [documentation for this plugin](https://jsx.email/docs/plugins/minify) for more information.

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/plugin-pretty
Description: A prettifying plugin for jsx-email
Author: Andrew Powell
Latest version: 1.0.0

[npm]: https://img.shields.io/npm/v/@jsx-email/plugin-pretty
[npm-url]: https://www.npmjs.com/package/@jsx-email/plugin-pretty

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"/><br/><br/>
</div>

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub" class="brackets" />
  <svg xmlns="http://www.w3.org/2000/svg" height="20" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="brackets">
    <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
  </svg>
  JSX email provides a set of React components and helpers for building delightful and responsive email templates, compatible with modern email clients.
  <br/><br/>
  The components handle the heavy lifting of compatibility and client inconsistency so designers and developers can focus on building impactful and engaging templates.
  <br/>
</div>

## Pretty Plugin

This is a core `jsx-email` plugin. Please see the [documentation for this plugin](https://jsx.email/docs/plugins/pretty) for more information.

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/preview
Description: A JSX email component which renders a preview viewable in recipient email clients
Latest version: 1.0.2
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/preview
[npm-url]: https://www.npmjs.com/package/@jsx-email/preview

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/preview

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A JSX email component which renders a preview viewable in recipient email clients
<div><br>

[`@jsx-email/preview` Documentation](https://jsx.email/docs/components/preview)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/preview

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/preview
# yarn add @jsx-email/preview
```

## Usage

We recommend using the [`@jsx-email/cli`](../cli) for [creating new templates](https://jsx.email/docs/quick-start#create-a-template).

Create an email template file (e.g. `Email.tsx`) and import the component:

```jsx
import { Preview } from '@jsx-email/preview';

const Email = () => {
  return <Preview>Email preview text</Preview>;
};
```

Please see the [`@jsx-email/preview` Documentation](https://jsx.email/docs/components/preview) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)
npm package: @jsx-email/react-email
Description: A live preview of your emails right in your browser.
Latest version: 1.10.0
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

![React email cover](https://react.email/static/covers/react-email.png)

<div align="center"><strong>React Email</strong></div>
<div align="center">The next generation of writing emails.<br />High-quality, unstyled components for creating emails.</div>
<br />
<div align="center">
<a href="https://react.email">Website</a> 
<span> · </span>
<a href="https://github.com/resendlabs/react-email">GitHub</a> 
<span> · </span>
<a href="https://react.email/discord">Discord</a>
</div>

## Getting started

To get started, open a new shell and run:

```sh
npx create-email
```

This will create a new folder called `emails` with a few email templates.

## Commands

### `email dev`

Starts a local development server that will watch your files and automatically rebuild your email when you make changes.

```sh
npx react-email dev
```

### `email export`

Generates the plain HTML files of your emails into a `out` directory.

```sh
npx react-email export
```

## License

MIT License
npm package: @jsx-email/render
Description: Render JSX email components to HTML email
Latest version: 3.0.1
Deprecated: The project has moved to a single package. Please install `jsx-email` for further updates

[npm]: https://img.shields.io/npm/v/@jsx-email/render
[npm-url]: https://www.npmjs.com/package/@jsx-email/render

[![npm][npm]][npm-url]
[![Join our Discord](https://img.shields.io/badge/join_our-Discord-5a64ea)](https://discord.gg/FywZN57mTg)
[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

<div align="center">
	<img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/npm-header.svg" alt="JSX email"><br/><br/>
</div>

# @jsx-email/render

<div>
  <img src="https://raw.githubusercontent.com/shellscape/jsx-email/main/assets/brackets.svg" alt="JSX email" valign="sub">
  A package for rendering JSX email components to HTML email
<div><br>

[`@jsx-email/render` Documentation](https://jsx.email/docs/core/render)

## Requirements

This package requires an [LTS](https://github.com/nodejs/Release) Node version (v18.0.0+) and React v18.2.0+.

## Install

```shell
pnpm add @jsx-email/render

# We recommend pnpm - https://pnpm.io
# But npm and yarn are supported
# npm add @jsx-email/render
# yarn add @jsx-email/render
```

## Usage

Convert React components into a HTML string.

```jsx
import { MyTemplate } from '../components/MyTemplate';
import { render } from '@jsx-email/render';

const html = render(<MyTemplate firstName="Jim" />);
```

Please see the [`@jsx-email/render` Documentation](https://jsx.email/docs/core/render) for props and additional usage information.

## Attribution 🧡

This package was built upon prior work for `react-email` by Bu Kinoshita ([@bukinoshita](https://twitter.com/bukinoshita)) and Zeno Rocha ([@zenorocha](https://twitter.com/zenorocha)).

## License

[MIT License](./LICENSE.md)