# @react-email/markdown

> Convert Markdown to valid React Email template code.

Latest version **0.0.18** (published 2025-12-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @react-email/markdown
pnpm add @react-email/markdown
yarn add @react-email/markdown
bun add @react-email/markdown
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.18 |
| Published | 2025-12-29 |
| First published | 2023-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.0.0 |
| Dependencies | 1 |
| Unpacked size | 46.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19732 |
| Maintainers | zenorocha, bukinoshita, gabrielmfern |
| Keywords | react, email, markdown |

## Links

- npm: https://www.npmjs.com/package/@react-email/markdown
- Repository: https://github.com/resend/react-email
- Homepage: https://github.com/resend/react-email#readme
- Issues: https://github.com/resend/react-email/issues
- npm.io page: https://npm.io/package/@react-email/markdown

## Dependencies (1)

- [marked](https://npm.io/package/marked.md) ^15.0.12

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 0.0.18 (latest) — 2025-12-29
- 0.0.17-canary.0 (canary) — 2025-11-03
- 0.0.17 — 2025-11-07
- 0.0.16 — 2025-10-17
- 0.0.15 — 2025-05-01
- 0.0.15-canary.0 — 2025-04-15
- 0.0.14 — 2024-12-06
- 0.0.13 — 2024-12-03
- 0.0.13-canary.3 — 2024-12-03
- 0.0.13-canary.2 — 2024-11-22
- 0.0.13-canary.1 — 2024-11-15
- 0.0.13-canary.0 — 2024-11-08
- 0.0.12 — 2024-08-22
- 0.0.12-canary.0 — 2024-07-23
- 0.0.11 — 2024-07-23
- … 11 more at https://npm.io/package/@react-email/markdown/versions

## README

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

<div align="center"><strong>@react-email/markdown</strong></div>
<div align="center">Convert Markdown to valid React Email template code.</div>
<br />
<div align="center">
<a href="https://react.email">Website</a> 
<span> · </span>
<a href="https://react.email">Documentation</a> 
<span> · </span>
<a href="https://react.email">Twitter</a>
</div>

## Install

Install component from your command line.

#### With yarn

```sh
yarn add @react-email/markdown -E
```

#### With npm

```sh
npm install @react-email/markdown -E
```

## Getting started

Add the component around your email body content.

```jsx
import { Markdown } from "@react-email/markdown";
import { Html } from "@react-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>
  );
```

## Props

### `children` field

- **Type**: string

Contains the markdown content that will be rendered in the email template.

### `markdownCustomStyles` field

- **Type**: object
- **Default**: `{}`

Provide custom styles for the corresponding HTML element (e.g., p, h1, h2, etc.).

### `markdownContainerStyles` field

- **Type**: object
- **Default**: `{}`

Provide custom styles for the containing `div` that wraps the markdown content.

## Support

This component was tested using the most popular email clients.

| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Gmail ✔                                                                                           | Apple Mail ✔                                                                                           | Outlook ✔                                                                                             | Yahoo! Mail ✔                                                                                                | HEY ✔                                                                                         | Superhuman ✔                                                                                                |

## License

MIT License

---
_Source: https://npm.io/package/@react-email/markdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
