Introduction & Features
Relevant source files
The following files were used as context for generating this wiki page:
React Email provides a collection of high-quality, unstyled components for creating responsive emails with React and TypeScript. The project simplifies email development by handling inconsistencies between major email clients like Gmail, Outlook, and Apple Mail. It modernization email creation for the way developers build web applications today.
Sources: README.md:12-16, skills/react-email/SKILL.md:21-23
Core Features and Capabilities
React Email combines a component library, a local development environment, and a visual editor to streamline the email lifecycle.
| Feature Category | Description |
|---|---|
| Component Library | Offers standard primitives (Buttons, Columns, Sections) that render to email-safe HTML tables. |
| Styling | Supports Tailwind CSS and inline styles with automatic conversion to client-compatible CSS. |
| Local Preview | Includes a development server to preview templates in real-time. |
| Visual Editor | Provides an embeddable editor based on TipTap for users to author emails. |
| Internationalization | Supports multi-language templates via next-intl, react-i18next, and react-intl. |
| Rendering | Converts React components into both HTML and plain-text versions. |
Sources: README.md:46-64, skills/react-email/SKILL.md:230-240, skills/react-email/references/COMPONENTS.md:12-30
Development Workflow
The development workflow enables you to define templates in React and preview them instantly.
This diagram shows the path from template definition to final delivery via an Email Service Provider (ESP).
Sources: README.md:33-42, skills/react-email/SKILL.md:27-38
Component Library
React Email includes a set of specialized components that replace standard HTML tags to ensure compatibility across email clients.
Structural Components
- Html: The root wrapper that sets
langanddir. - Head: Contains meta elements, styles, and fonts.
- Body: Wraps the main content of the email.
- Container: Centers content horizontally with a default max-width of
37.5em. - Section: Groups content blocks and renders as a layout table.
- Row & Column: Manages multi-column layouts without using Flexbox or Grid.
Sources: skills/react-email/references/COMPONENTS.md:73-128, skills/react-email/SKILL.md:103-113
Content Components
- Button: Creates styled link buttons and handles Outlook padding issues.
- Img: Displays images; requires absolute URLs and explicit
alttext. - Markdown: Converts markdown strings into valid React Email component structures.
- Preview: Sets the snippet text displayed in the recipient's inbox.
- CodeBlock: Renders syntax-highlighted code using Prism.js.
Sources: skills/react-email/references/COMPONENTS.md:144-245, skills/react-email/SKILL.md:115-125
Styling and Layout
The Tailwind component is the recommended method for styling. It automatically converts utility classes into inline styles and extracts media queries into the document head.
Styling Constraints
Email clients impose significant CSS restrictions. You must follow these specific rules:
- Use Pixels: rem units are not supported. Use the
pixelBasedPresetin your Tailwind configuration. - Avoid Flexbox/Grid: Use
RowandColumncomponents instead. - Border Specification: Always specify the border style (e.g.,
border-solid) as email clients do not inherit it. - No SVG/WEBP: Use only PNG or JPEG images.
Sources: skills/react-email/references/STYLING.md:28-56, skills/react-email/SKILL.md:162-184
This diagram illustrates how the Tailwind component processes CSS utilities for email compatibility.
Sources: skills/react-email/references/COMPONENTS.md:52-60
CLI and Integration
The email command provides tools for development and production.
| Command | Action |
|---|---|
email dev | Starts the preview server (default port 3000). |
email export | Exports templates to static HTML and plain-text files. |
email build | Builds the preview application for production deployment. |
email resend setup | Configures the CLI with a Resend API key for testing. |
Sources: skills/react-email/SKILL.md:244-252
Email Service Providers (ESP)
Rendered templates can be sent through various providers:
- Resend: Native SDK support for React components.
- Nodemailer: Standard SMTP transport.
- Others: SendGrid, Mailgun, Postmark, AWS SES, and Azure Communication Email.
Sources: README.md:72-83, skills/react-email/SKILL.md:228-242
Visual Email Editor
The @react-email/editor package is a visual editor built on TipTap and ProseMirror. It allows you to embed a rich text authoring experience into your own applications.
Key Editor Components
- EmailEditor: The primary React component for the editor interface.
- StarterKit: Includes over 35 extensions for headings, lists, tables, and buttons.
- composeReactEmail: A utility that serializes editor JSON content into email-ready HTML.
Sources: skills/react-email/SKILL.md:261-285, apps/web/src/components/sections/editor.tsx:50-70
This sequence shows the data flow from user input in the visual editor to the final rendered output.
Sources: packages/editor/src/core/serializer/compose-react-email.spec.tsx:442-458, skills/react-email/SKILL.md:270-280
Accessibility and Best Practices
React Email enforces accessibility standards by default.
- Semantic HTML: Layout components render as
table role="presentation"so screen readers skip them. - Language Attributes: The
<Html>component manageslanganddirfor localization. - Alt Text: The
<Img>component defaults toalt=""for decorative images, but requires explicit values for meaningful content. - Size Limits: Keep final HTML files under 102KB to prevent Gmail from clipping the content.
Sources: skills/react-email/SKILL.md:313-350, skills/react-email/references/STYLING.md:126-140