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@experimental

​
Import CSS

The quickest way to get started is to import the bundled default 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';

​
Minimal editor

The simplest setup uses StarterKit with EditorProvider—no UI overlays, just a content-editable area with all core extensions (paragraphs, headings, lists, tables, code blocks, and more): 
import { StarterKit } from '@react-email/editor/extensions';
import { EditorProvider } from '@tiptap/react';

const extensions = [StarterKit];

const content = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'Start typing or edit this text.',
        },
      ],
    },
  ],
};

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

​
Adding a bubble menu

To add a floating formatting toolbar that appears when you select text, add BubbleMenu.Default 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 = {
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        { type: 'text', text: 'Select this text to see the bubble menu. Try ' },
        { type: 'text', marks: [{ type: 'bold' }], text: 'bold' },
        { type: 'text', text: ', ' },
        { type: 'text', marks: [{ type: 'italic' }], text: 'italic' },
        { type: 'text', text: ', and other formatting options.' },
      ],
    },
  ],
};

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu.Default />
    </EditorProvider>
  );
}
Select text in the editor to see the formatting toolbar with bold, italic, underline, alignment, and more.

​
Content format

The editor accepts content in two formats: TipTap JSON — A structured document tree: 
{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Hello world" }
      ]
    }
  ]
}
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>
`;

<EditorProvider extensions={extensions} content={content} />

​
Examples

See these features in action with runnable examples:

One-Line Editor — Minimal

The simplest possible editor setup.

Basic Editor

EditorProvider with StarterKit and no overlays.

One-Line Editor — Full Features

Theme toggle, HTML export, and JSON output.

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.