A JSX email component which converts markdown input to valid HTML for email
@jsx-email/markdown Documentation
This package requires an LTS Node version (v18.0.0+) and React v18.2.0+.
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/markdownWe recommend using the @jsx-email/cli for creating new templates.
Create an email template file (e.g. Email.tsx) and import the component:
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 for props and additional usage information.
This package was built upon prior work for react-email by Bu Kinoshita (@bukinoshita) and Zeno Rocha (@zenorocha).