DOCSEARCHbyAlgolia
Submit Docs

React Email

repository·canary·Indexed 12 days ago

https://github.com/resend/react-email

A collection of high-quality, unstyled React components for creating responsive, modern emails. It includes a CLI for development and exporting to HTML, a rich text editor via @react-email/editor, and a rendering engine via @react-email/render to transform components into static HTML strings.

Tokens
93.1K
Snippets
309
Records
407
Agent score
96%

What's inside React Email

  1. Overview of the React Email Editor

    canary
    The React Email Editor is an embeddable visual editor designed specifically for composing React Email templates. It is built on top of TipTap and ProseMirror, meaning standard TipTap and ProseMirror concepts apply. The editor produces email-ready HTML and plain text, and supports features like rich text editing, bubble menus, slash commands, multi-column layouts, and email theming.

  2. Integrate React Email with email service providers

    canary
    React Email supports various email service providers (ESPs) to send your rendered emails. You can integrate with providers such as Resend, Nodemailer, Mailgun, SendGrid, Postmark, AWS SES, Azure Communication Email, MailerSend, Scaleway, and Plunk. Each integration typically involves using a specific package or adapter to bridge your React-rendered email components with the provider's API.

  6. Parsing HTML content with links

    canary

    The editor automatically parses <a> tags from HTML strings into its internal link model.

    Note that the link extension is included in StarterKit with openOnClick disabled by default. This behavior ensures that clicking a link in edit mode focuses the link rather than navigating the user away from the editor.

    const content = `
  <p>Visit <a href="https://react.email" target="_blank">React Email</a> for more info.</p>
`;

  7. Use structural components for email layout

    canary

    React Email provides several components to build the skeleton of your email.

    • <Html>: The root wrapper. Always use this as the outermost component. Supports lang and dir props.
    • <Head>: Contains document metadata like <title> or <style>. Place this inside <Tailwind>.
    • <Body>: Wraps the main content of the email.
    • <Container>: Centers content horizontally with a default max-width of 37.5em.
    • <Section>: A layout block that can contain rows and columns. It renders a <table role="presentation"> by default.
    • <Row> and <Column>: Used together to create grid-like layouts. <Row> separates content horizontally, and <Column> separates content vertically. Note: <Column> must always be a child of <Row>.

    Layout Tip: If you use a raw <table> for layout instead of these components, you must manually add role="presentation" for accessibility.

    import { Section, Row, Column } from 'react-email';

<Section>
  <Row>
    <Column className="w-1/2 p-2 align-top">
      Left column content
    </Column>
    <Column className="w-1/2 p-2 align-top">
      Right column content
    </Column>
  </Row>
</Section>

  10. Handle email client CSS limitations

    canary

    Email clients have significant CSS restrictions. Avoid the following:

    • Flexbox/Grid: Use <Row> and <Column> components or HTML tables instead.
    • Media Queries: Responsive prefixes like sm:, md:, lg:, and xl: are not supported.
    • Theme Selectors: dark: and light: prefixes do not work.
    • SVG/WEBP: Use only PNG or JPEG formats for images.
    • rem units: Always use pixelBasedPreset to ensure pixel conversion.

    Border Handling

    When applying borders, you must explicitly specify the border style. Simply using border without a style (like border-solid) may fail in some clients.

    // Correct: specify border style
<div className="border-solid border border-gray-300" />

// Correct: single side border with reset
<div className="border-none border-l border-solid border-l-gray-300" />

// Incorrect: missing border style
<div className="border border-gray-300" />

  11. Core React Email Components

    canary

    React Email provides a set of standard components designed to handle the complexities of email markup (like table-based layouts) so you can build emails using modern React patterns. Key components include:

    • Html: A React component used to wrap your entire email content.
    • Container: The main wrapper component that holds your email content.
    • Button: A component for building clickable buttons within emails.
    • Text: A component for rendering blocks of text with appropriate spacing.

  12. How the Editor Event Bus works

    canary

    The editor uses a singleton editorEventBus to facilitate communication between components. It is built on the browser's native CustomEvent API, and all events are prefixed with @react-email/editor:. This allows different parts of the editor to react to actions (like menu interactions) or trigger custom logic without direct component coupling.

    import { editorEventBus } from '@react-email/editor/core';