> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor

> An embeddable visual editor for building React Email templates.

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](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/).

## 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 |

> [!NOTE]
>
> The editor uses [TipTap](https://tiptap.dev/) under the hood, so [TipTap](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/) 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](https://react.email/docs/editor/getting-started.md)**
>
> Set up the editor in under 5 minutes.

> **[Bubble Menu](https://react.email/docs/editor/features/bubble-menu.md)**
>
> Add floating formatting toolbars.

> **[Slash Commands](https://react.email/docs/editor/features/slash-commands.md)**
>
> Insert content blocks with a command menu.

> **[Email Theming](https://react.email/docs/editor/features/theming.md)**
>
> Apply visual themes to your email output.

> **[Image Upload](https://react.email/docs/editor/features/image-upload.md)**
>
> Upload images via paste, drop, or slash command.

> **[Styling](https://react.email/docs/editor/features/styling.md)**
>
> Customize the editor's appearance with CSS.

> **[Email Export](https://react.email/docs/editor/features/email-export.md)**
>
> Convert editor content to email-ready HTML.

> **[Custom Extensions](https://react.email/docs/editor/advanced/custom-extensions.md)**
>
> Create your own email-compatible nodes.

## Examples

Runnable examples are available at [react.email/editor/examples](https://react.email/editor/examples). Each example demonstrates a specific feature in isolation:

> **[Full Email Builder](https://react.email/editor/examples/full-email-builder)**
>
> All features combined — theming, bubble menus, slash commands, and HTML export.

> **[All Examples](https://react.email/editor/examples)**
>
> Browse the complete set of interactive examples.

## Known limitations

> **Slow dev-time compilation on Next.js because of Prism.js**
>
> The editor's code block extension is built on top of react-email's
> [`CodeBlock`](https://react.email/docs/components/code-block) 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`](https://pnpm.io/cli/patch) or
> [`patch-package`](https://www.npmjs.com/package/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:
>
> ```js theme={"theme":{"light":"github-light","dark":"vesper"}}
> import * as PrismImport from "prismjs";
> const Prism = PrismImport.default ?? PrismImport;
> export { Prism };
> ```
>
> 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.