Markdown

Install

Install component from your command line.

npm install react-email -E

yarn add react-email -E

pnpm add react-email -E

Getting started

Add the component to your email template. Include styles where needed.

import { Markdown, Html } from "react-email";

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

string

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

object

default:"{}"

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

object

default:"{}"

Provide custom styles for the corresponding html element (p, h1, h2, etc.)

Note: Passing a custom style for an element overrides the default styles.

Support

All components were tested using the most popular email clients.

Gmail

Apple Mail

Outlook

Yahoo! Mail

HEY

Superhuman

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Install

Getting started

Props

Support

​Install

​Getting started

​Props

​Support

Install

Getting started

Props

Support