Skip to content

React Email Markdown


Install component from your command line.

Terminal window
npm install @react-email/components -E
# or get the individual package
npm install @react-email/markdown -E

Getting Started

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

import { Markdown, Html } from "@react-email/components";
const Email = () => {
return (
<Html lang="en" dir="ltr">
h1: { color: "red" },
h2: { color: "blue" },
codeInline: { background: "grey" },
padding: "12px",
border: "solid 1px black",
>{`# Hello, World!`}</Markdown>
{/* OR */}
<Markdown children={`# This is a ~~strikethrough~~`} />


ParamTypeDefault ValueRemark
childrenstringContains the markdown content that will be rendered in the email template
markdownContainerStylesobject{}Provide custom styles for the containing div that wraps the markdown content
markdownCustomStylesobject{}Provide custom styles for the corresponding html element (p, h1, h2, etc.)