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

# Getting Started

> Set up the email editor in your React project in under 5 minutes.

## Prerequisites

> [!NOTE]
>
> The editor requires **React 18+** and a bundler that supports [package exports](https://nodejs.org/api/packages.html#exports) (Vite, Next.js, Webpack 5, etc.).

## Install

Install the editor and its peer dependencies:

```sh npm theme={"theme":{"light":"github-light","dark":"vesper"}}
npm install @react-email/editor
```

```sh yarn theme={"theme":{"light":"github-light","dark":"vesper"}}
yarn add @react-email/editor
```

```sh pnpm theme={"theme":{"light":"github-light","dark":"vesper"}}
pnpm add @react-email/editor
```

```sh bun theme={"theme":{"light":"github-light","dark":"vesper"}}
bun add @react-email/editor
```

## Quick start

The recommended way to start is with the standalone `EmailEditor` component. It
gives you a working editor with the default bubble menus, slash commands,
theming, and export helpers already wired up:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { EmailEditor } from '@react-email/editor';

const content = `
  <h1>Welcome</h1>
  <p>
    This is the simplest way to use the editor. Try selecting text to see the
    bubble menu, or type "/" for slash commands.
  </p>
`;

export function MyEditor() {
  return <EmailEditor content={content} />;
}
```

This renders a functional editor, but it's unstyled. To style the editor,
import the default theme:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import '@react-email/editor/themes/default.css';
```

You can also build your own theme to style the editor to look and feel like
your own app. See [styling](https://react.email/docs/editor/features/styling.md).

See the [API Reference](https://react.email/docs/editor/api-reference/email-editor.md) for details.

> [!TIP]
>
> Start here unless you need full control over the extension list, provider
> layout, or UI composition, in which case see [Lower Level Setup](#lower-level-setup).

## Content format

The editor accepts content in two formats:

**HTML string** — Parsed automatically into the editor's document model:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
const content = `
  <h1>Welcome</h1>
  <p>This is a <a href="https://react.email">link</a>.</p>
`;

<EmailEditor content={content} />
```

**TipTap JSON** — A structured document tree:

```json theme={"theme":{"light":"github-light","dark":"vesper"}}
{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Hello world" }
      ]
    }
  ]
}
```

## Lower-level setup

If you need more control, drop down to Tiptap's `EditorProvider` and compose the
editor yourself. This is the lower-level path: you choose the extensions, add
UI overlays manually, and import any CSS you need.

Common building blocks on this path are [`StarterKit`](https://react.email/docs/editor/api-reference/extensions-list),
[`BubbleMenu`](https://react.email/docs/editor/api-reference/ui/bubble-menu),
[`SlashCommand`](https://react.email/docs/editor/api-reference/ui/slash-command),
[`EmailTheming`](https://react.email/docs/editor/api-reference/theming-api),
[`composeReactEmail`](https://react.email/docs/editor/api-reference/compose-react-email), and the
[`useEditor`](https://react.email/docs/editor/api-reference/use-editor) hook.

The simplest manual setup uses `StarterKit` with `EditorProvider` and no UI
overlays:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

const content = `
  <h1>Welcome</h1>
  <p>Start typing or edit this text.</p>
`;

export function MyEditor() {
  return <EditorProvider extensions={extensions} content={content} />;
}
```

### Import CSS

When you use the lower-level UI components directly, import the bundled theme:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import '@react-email/editor/themes/default.css';
```

This single import includes the default color theme and the built-in UI styles
for bubble menus, slash commands, and the inspector.

> [!TIP]
>
> If you want to import only the pieces you use, skip the bundled theme and
> import the individual CSS files instead:
>
> ```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
> import '@react-email/editor/styles/bubble-menu.css';
> import '@react-email/editor/styles/slash-command.css';
> import '@react-email/editor/styles/inspector.css';
> ```

### Adding a bubble menu

To add a floating formatting toolbar that appears when you select text, add `BubbleMenu`
as a child of `EditorProvider`:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { StarterKit } from '@react-email/editor/extensions';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

const content = `
  <p>
    Select this text to see the bubble menu. Try <strong>bold</strong>,
    <em>italic</em>, and other formatting options.
  </p>
`;

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu />
    </EditorProvider>
  );
}
```

Select text in the editor to see the formatting toolbar with bold, italic,
underline, alignment, and more.

## Examples

See these features in action with runnable examples:

> **[Standalone Editor — Minimal](https://react.email/editor/examples/standalone-editor)**
>
> The simplest possible editor setup.

> **[Basic Editor](https://react.email/editor/examples/basic-editor)**
>
> EditorProvider with StarterKit and no overlays.

> **[Standalone Editor — Full Features](https://react.email/editor/examples/standalone-editor-full)**
>
> Theme toggle, HTML export, and JSON output.

> **[Standalone Editor — Inspector](https://react.email/editor/examples/standalone-editor-inspector)**
>
> Add an inspector sidebar with zero manual setup.

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

## Next steps

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

> **[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.

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


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