Skip to main content

​
Prerequisites

The editor requires React 18+ and a bundler that supports package exports (Vite, Next.js, Webpack 5, etc.).

​
Install

Install the editor and its peer dependencies: 
npm install @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: 
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} />;
}
See the API Reference for details.
Start here unless you need full control over the extension list, provider layout, or UI composition, in which case see Lower Level Setup.

​
Content format

The editor accepts content in two formats: HTML string — Parsed automatically into the editor’s document model: 
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: 
{
  "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, BubbleMenu, SlashCommand, EmailTheming, composeReactEmail, and the useEditor hook. The simplest manual setup uses StarterKit with EditorProvider and no UI overlays: 
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: 
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.
If you want to import only the pieces you use, skip the bundled theme and import the individual CSS files instead:
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: 
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

The simplest possible editor setup.

Basic Editor

EditorProvider with StarterKit and no overlays.

Standalone Editor — Full Features

Theme toggle, HTML export, and JSON output.

Standalone Editor — Inspector

Add an inspector sidebar with zero manual setup.

All Examples

Browse the complete set of interactive examples.

​
Next steps

Bubble Menu

Add floating formatting toolbars on text selection.

Slash Commands

Insert content blocks with a command menu.

Email Theming

Apply visual themes to your email output.

Email Export

Convert editor content to email-ready HTML.