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:| Import | Purpose |
|---|---|
@react-email/editor/core | useEditor hook, composeReactEmail serialization, event bus |
@react-email/editor/extensions | StarterKit and 35+ email-aware extensions |
@react-email/editor/ui | Bubble menus, slash commands |
@react-email/editor/plugins | Email theming plugin |
@react-email/editor/utils | Attribute 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.
Quick links
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.