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

<Info>
  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.
</Info>

## Quick links

<CardGroup cols={2}>
  <Card title="Getting Started" icon="rocket" href="/docs/editor/getting-started">
    Set up the editor in under 5 minutes.
  </Card>

  <Card title="Bubble Menu" icon="message-lines" href="/docs/editor/features/bubble-menu">
    Add floating formatting toolbars.
  </Card>

  <Card title="Slash Commands" icon="slash-forward" href="/docs/editor/features/slash-commands">
    Insert content blocks with a command menu.
  </Card>

  <Card title="Email Theming" icon="palette" href="/docs/editor/features/theming">
    Apply visual themes to your email output.
  </Card>

  <Card title="Image Upload" icon="image" href="/docs/editor/features/image-upload">
    Upload images via paste, drop, or slash command.
  </Card>

  <Card title="Styling" icon="paintbrush" href="/docs/editor/features/styling">
    Customize the editor's appearance with CSS.
  </Card>

  <Card title="Email Export" icon="file-export" href="/docs/editor/features/email-export">
    Convert editor content to email-ready HTML.
  </Card>

  <Card title="Custom Extensions" icon="wrench" href="/docs/editor/advanced/custom-extensions">
    Create your own email-compatible nodes.
  </Card>
</CardGroup>

## Examples

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

<CardGroup cols={2}>
  <Card title="Full Email Builder" icon="code" href="https://react.email/editor/examples/full-email-builder">
    All features combined — theming, bubble menus, slash commands, and HTML export.
  </Card>

  <Card title="All Examples" icon="folder-open" href="https://react.email/editor/examples">
    Browse the complete set of interactive examples.
  </Card>
</CardGroup>

## Known limitations

<AccordionGroup>
  <Accordion title="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`](/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.
  </Accordion>
</AccordionGroup>