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 | composeReactEmail serialization, event bus, types |
@react-email/editor/extensions | StarterKit and 35+ email-aware extensions |
@react-email/editor/ui | Bubble menus, slash commands |
@react-email/editor/plugins | Email theming and image upload plugins |
@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.
Image Upload
Upload images via paste, drop, or slash command.
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.
Examples
Runnable examples are available at react.email/editor/examples. Each example demonstrates a specific feature in isolation:Full Email Builder
All features combined — theming, bubble menus, slash commands, and HTML export.
All Examples
Browse the complete set of interactive examples.