Skip to main content

Documentation Index

Fetch the complete documentation index at: https://react.email/docs/llms.txt

Use this file to discover all available pages before exploring further.

​
Install

Install the component from your command line. 
npm install react-email -E

​
Getting Started

Add the component into your email component as follows. 
import { CodeBlock, dracula } from 'react-email';

const Email = () => {
  const code = `export default async (req, res) => {
  try {
    const html = await renderAsync(
      EmailTemplate({ firstName: 'John' })
    );
    return NextResponse.json({ html });
  } catch (error) {
    return NextResponse.json({ error });
  }
}`;

  return (<CodeBlock
    code={code}
    lineNumbers // add this so that there are line numbers beside each code line
    theme={dracula}
    language="javascript"
  />);
};
This should render a code-block with the desired theme.

​
Theming

Themes for this component are basically a set of styles for each kind of token that can result from prismjs’s tokenization. See here for more information on the tokens available. An example of a theme would be this: 
{
  "base": {
    "color": "#f8f8f2",
    "background": "#282a36",
    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
    "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    "textAlign": "left",
    "whiteSpace": "pre",
    "wordSpacing": "normal",
    "wordBreak": "normal",
    "wordWrap": "normal",
    "lineHeight": "1.5",
    "MozTabSize": "4",
    "OTabSize": "4",
    "tabSize": "4",
    "WebkitHyphens": "none",
    "MozHyphens": "none",
    "MsHyphens": "none",
    "hyphens": "none",
    "padding": "1em",
    "margin": ".5em 0",
    "overflow": "auto",
    "borderRadius": "0.3em"
  },
  "comment": {
    "color": "#6272a4"
  },
  "prolog": {
    "color": "#6272a4"
  },
  "doctype": {
    "color": "#6272a4"
  },
  "cdata": {
    "color": "#6272a4"
  },
  "punctuation": {
    "color": "#f8f8f2"
  },
  "property": {
    "color": "#ff79c6"
  },
  // ...
}
Each token type can have their own defined styles and for each one of there can be any styles that can be applied directly to React elements. As you can see from the example dracula theme though, there is a defined property called base which is the styling for the pre element that wraps the HTML being rendered. For you to not need to defined a theme without any basis, or to not define one that already has been defined, we have many default themes exported from react-email. These themes were generated by a bit of code that converts a CSS file for a prismjs theme into a object theme of these. If you want to generate a theme from another existing prismjs theme you can do so by looking into this.

​
Props

​
lineNumbers
boolean
Whether or not to automatically include line numbers on the rendered code block
​
fontFamily
string
The font family value to go into the fontFamily: "..." style for all used elements of the component
​
theme
Theme
required
An object representation of a PrismJS CSS theme
​
language
string
required
The language under the supported languages defined in PrismLanguage
​
code
string
required
The actual code to render in the code block. Just a plain string, with the proper indentation included.

​
Support

All components were tested using the most popular email clients.
GmailGmail
Apple MailApple Mail
OutlookOutlook
Yahoo! MailYahoo! Mail
HEYHEY
SuperhumanSuperhuman