Convert Markdown to valid React Email template code.
Installation
npm install @react-email/markdown -E
Usage
Add the component around your email body content.
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
The markdown content that will be rendered in the email template
Provide custom styles for the corresponding HTML elements (e.g., p, h1, h2, etc.)
markdownContainerStyles
React.CSSProperties
default:"{}"
Provide custom styles for the containing div that wraps the markdown content
Supported Markdown Features
The Markdown component supports all standard markdown syntax:
- Headings:
# H1 through ###### H6
- Bold:
**bold** or __bold__
- Italic:
*italic* or _italic_
- Strikethrough:
~~strikethrough~~
- Links:
[text](url)
- Images:
- Code blocks:
```code```
- Inline code:
`code`
- Lists: Ordered (
1.) and unordered (- or *)
- Blockquotes:
> quote
- Horizontal rules:
--- or ***
- Tables: Markdown table syntax
Styling Examples
Custom Heading Colors
import { Markdown } from "@react-email/markdown";
const Email = () => {
return (
<Markdown
markdownCustomStyles={{
h1: { color: "#1a1a1a", fontSize: "32px" },
h2: { color: "#333333", fontSize: "24px" },
h3: { color: "#666666", fontSize: "18px" },
}}
>
{`
# Main Heading
## Subheading
### Section Title
`}
</Markdown>
);
};
Custom Link and Code Styles
import { Markdown } from "@react-email/markdown";
const Email = () => {
return (
<Markdown
markdownCustomStyles={{
link: { color: "#0066cc", textDecoration: "underline" },
codeInline: {
backgroundColor: "#f4f4f4",
padding: "2px 6px",
borderRadius: "3px",
fontFamily: "monospace"
},
codeBlock: {
backgroundColor: "#2d2d2d",
color: "#f8f8f2",
padding: "16px",
borderRadius: "4px"
}
}}
>
{`Check out [our docs](https://example.com) for more info on \`inline code\`.`}
</Markdown>
);
};
Available Style Properties
You can customize styles for the following elements:
h1, h2, h3, h4, h5, h6 - Headingsp - Paragraphslink - Linksbold - Bold textitalic - Italic textstrikethrough - Strikethrough textcodeInline - Inline codecodeBlock - Code blocksblockQuote - Blockquotesul, ol - Listsli - List itemstable, thead, tbody, tr, td - Table elementshr - Horizontal rulesimage - Images
TypeScript
export type MarkdownProps = Readonly<{
children: string;
markdownCustomStyles?: StylesType;
markdownContainerStyles?: React.CSSProperties;
}>;
Email Client Support
This component was tested using the most popular email clients.
| Gmail | Apple Mail | Outlook | Yahoo! Mail | HEY | Superhuman |
|---|
| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |