Skip to main content
The React Email Editor is a visual editor that you can embed in your app. It’s made specifically for composing React Email templates. Using the power of React Email, it produces email-ready HTML, 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:
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.

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.

​
Known limitations

The editor’s code block extension is built on top of react-email’s CodeBlock component, which ships every Prism.js language grammar in a single module. Bundlers that do not tree shake during development, like Next.js, compile all of those grammars whenever the editor is in the module graph, which significantly slows down dev-time compilation.The current escape hatch is to patch your installed copy of react-email, with pnpm patch or patch-package, stripping the grammars you don’t use out of dist/components/code-block/prism.mjs (and prism.cjs if you consume the CJS build) while keeping the top of the file that imports and re-exports Prism itself:
Prism.js still registers markup, css, clike and javascript by default, and the editor lazily loads any other grammar it needs while editing, so the editing experience is unaffected. Keep the grammars for every language you render into emails though, since CodeBlock throws when it is given a language that is not registered.Fully removing this weight requires a breaking change to how code blocks are highlighted, which we are exploring.