Skip to main content
The React Email Editor is a visual WYSIWYG editor for composing email templates in React. It produces email-safe HTML through React Email components and is built on top of TipTap and ProseMirror.

​
Key features

  • Rich text editing — Paragraphs, headings, lists, code blocks, tables, and more
  • Bubble menus — Floating formatting toolbars that appear on text selection
  • Slash commands — Insert content blocks by typing /
  • Multi-column layouts — Two, three, and four column email layouts
  • Email theming — Built-in themes with customizable CSS properties
  • HTML export — Convert editor content to email-ready HTML and plain text
  • Custom extensions — Create your own email-compatible nodes and marks

​
Architecture

The editor is organized into five entry points:
ImportPurpose
@react-email/editor/coreuseEditor hook, composeReactEmail serialization, event bus
@react-email/editor/extensionsStarterKit and 35+ email-aware extensions
@react-email/editor/uiBubble menus, slash commands
@react-email/editor/pluginsEmail theming plugin
@react-email/editor/utilsAttribute helpers, style utilities
The editor uses TipTap under the hood, so TipTap and ProseMirror concepts apply. Extensions are email-aware versions of TipTap nodes and marks that know how to serialize to React Email components.

Getting Started

Set up the editor in under 5 minutes.

Bubble Menu

Add floating formatting toolbars.

Slash Commands

Insert content blocks with a command menu.

Email Theming

Apply visual themes to your email output.

Styling

Customize the editor’s appearance with CSS.

Email Export

Convert editor content to email-ready HTML.

Custom Extensions

Create your own email-compatible nodes.