React Email 6.0

What is React Email 6.0?

React Email 6.0 is an open-source update to React Email, providing a visual email editor that you can embed inside your own application. It also includes a new set of templates and a unified package for importing React Email components.

The core purpose of React Email 6 is to help teams author email layouts and generate email-ready output (including HTML) from a React-based workflow, while keeping the editor extensible and customizable.

Key Features

• Open-source visual editor (standalone package): Install the editor as @react-email/editor and embed it in your app using EmailEditor.
• Embed in your application: Render the editor directly in React with a minimal component example (return <EmailEditor />).
• Editor architecture with core + extensions: The editor is split into a built-in core and an extension layer, so custom blocks/features can be added without changing the core.
• Composable node API (EmailNode) for custom blocks: Define new editor blocks by specifying both how the block maps to HTML and how it renders to React Email output.
• Theme support: Load the default theme CSS (@react-email/editor/themes/default.css) or build a custom theme to match your app’s styling.
• New templates collection: Includes templates for common use cases (authentication flows and e-commerce sequences) provided as React Email templates and as Figma files.
• Unified React Email components package: Import components from react-email as a single package (the editor still needs separate installation).

How to Use React Email 6.0

1. Install or update packages using the instructions from the upgrade section if you are moving from React Email 5.0.
2. Install the editor separately (the editor is not included in the unified react-email package):
   • npm i @react-email/editor
3. Embed the editor in your React app:
   • Import EmailEditor from @react-email/editor and render it in a component.
4. Optionally style the editor:
   • Import the default theme CSS (@react-email/editor/themes/default.css) or apply your own theme.
5. Customize the editor (optional):
   • Use the composable API (EmailNode) to define custom blocks that include both HTML parsing (parseHTML) and output generation (renderToReactEmail).
6. Start from templates:
   • Use the provided templates as a base, or pull individual sections into your own React Email templates.

Use Cases

• Embed an email composer in a web app: Add a visual editor to a dashboard so users can create email content inside your product.
• Build custom content blocks for specific workflows: Create blocks like a callout, media uploader, embedded social posts, or inline charts by defining an EmailNode.
• Standardize templates for common email types: Use the new authentication flow and e-commerce templates to reduce time spent creating initial layouts.
• Integrate the editor with your existing UI styling: Import the default theme to get started quickly, then create a custom theme so the editor matches your application.
• Develop a maintainable email component library: Import common layout and UI components from the unified react-email package while keeping the editor as a separate install.

FAQ

• Is the editor included in the unified react-email package?
  No. The editor is installed separately as @react-email/editor.

• Can I embed the editor directly in my React app?
  Yes. The documentation shows importing EmailEditor and rendering it in a component.

• How do I add custom blocks to the editor?
  Use the composable API via EmailNode to define a block’s HTML parsing (parseHTML) and its React Email rendering output (renderToReactEmail).

• Where can I find the new templates?
  The templates are available as React Email templates and as Figma files, including authentication and e-commerce templates.

• What’s different about upgrading from React Email 5.0 to 6.0?
  The upgrade steps remove @react-email/components and @react-email/preview-server, install react-email@latest and @react-email/ui@latest, and update imports to use react-email instead of @react-email/components.

Alternatives

• Generic email HTML editors/builders (non-React): Useful if you only need an editor UI and don’t want a React-based component workflow, but you lose the React Email integration model.
• Template-first React email libraries: If you don’t need a visual editor embedded in your app, you can rely on React components/templates without editor extensibility.
• WYSIWYG editors that export HTML: These can produce email HTML output, but they may not provide the same composable node approach for embedding editor-specific custom blocks into a React Email workflow.
• Design tooling with manual conversion to email markup: Figma-first teams can create layouts in Figma and manually implement them in email code; this differs from using React Email templates directly and from generating email-ready output through the editor workflow.