EmailEditor

EmailEditor is the highest-level way to embed the React Email editor. It wraps Tiptap’s EditorProvider, mounts the default editor UI, and exposes a ref API for exporting HTML, plain text, and JSON. Use it when you want a batteries-included editor. If you need full control over the provider, overlays, or extension list, compose the editor from the lower-level APIs instead.

EmailEditor automatically imports @react-email/editor/themes/default.css, so the default bubble menus, slash command menu, and theme styles work without a separate CSS import.See styling for details on customizing the editor’s appearance.

Import

import { EmailEditor, type EmailEditorRef } from '@react-email/editor';

Signature

const EmailEditor: React.ForwardRefExoticComponent<
  EmailEditorProps & React.RefAttributes<EmailEditorRef>
>;

Default behavior

When rendered without a custom extensions prop, EmailEditor configures:

If onUploadImage is provided, the image upload extension is appended automatically.

Props

Content

Initial editor content. Accepts TipTap JSON or an HTML string.

(ref: EmailEditorRef) => void

Called on every content update. The callback receives the same helper object exposed through the component ref.

(ref: EmailEditorRef) => void

Called once after the editor instance is mounted and ready.

EditorThemeInput

default:"'basic'"

Built-in theme preset or custom theme object used by the default EmailTheming extension.

boolean

default:"true"

Toggles read-only mode for the editor content.

string

Overrides the default placeholder text. When omitted, paragraphs show Press '/' for commands.

Configures when the default text bubble menu should stay hidden.

Extensions

Replaces the default extensions array. Use this when you want more control over the editor schema or plugin list.

(file: File) => Promise<{ url: string }>

Enables image upload for paste, drop, and image insertion flows. Resolve with the final hosted image URL. See Image Upload for setup patterns and Image Upload API for the lower-level hook, commands, and types.

string

Applied to the underlying editor container element.

ReactNode

Additional UI rendered inside the internal EditorProvider. Children render as siblings of the editor content area, which makes layouts like split-pane editors and inspector sidebars work naturally.

bubbleMenu options

string[]

default:"['button']"

Prevents the default text bubble menu from appearing when one of these node types is active.

string[]

default:"['link']"

Prevents the default text bubble menu from appearing when one of these mark types is active.

Ref API

interface EmailEditorRef {
  getEmail(): Promise<{ html: string; text: string }>;
  getEmailHTML(): Promise<string>;
  getEmailText(): Promise<string>;
  getJSON(): JSONContent;
  editor: Editor | null;
}

() => Promise<{ html: string; text: string }>

Serializes the current document to email-ready HTML and plain text in one call.

() => Promise<string>

Returns only the HTML export.

() => Promise<string>

Returns only the plain text export.

() => JSONContent

Returns the current TipTap JSON document.

Editor | null

The underlying TipTap editor instance. null until the editor is ready.

Before the editor is ready, the export methods resolve to empty output and getJSON() returns an empty document with type: 'doc' and an empty content array.

Example

import { EmailEditor, type EmailEditorRef } from '@react-email/editor';
import { useRef, useState } from 'react';

export function MyEditor() {
  const editorRef = useRef<EmailEditorRef>(null);
  const [html, setHtml] = useState('');

  const handleExport = async () => {
    if (!editorRef.current) return;
    setHtml(await editorRef.current.getEmailHTML());
  };

  return (
    <div>
      <EmailEditor
        ref={editorRef}
        content="<h1>Welcome</h1><p>Edit this email.</p>"
        theme="basic"
        onReady={(ref) => {
          console.log(ref.getJSON());
        }}
        onUpdate={(ref) => {
          console.log(ref.editor?.isEmpty);
        }}
      />

      <button onClick={handleExport}>Export HTML</button>

      {html && <textarea readOnly value={html} rows={12} />}
    </div>
  );
}

Overview

Features

Advanced

API Reference

Import

Signature

Default behavior

Props

bubbleMenu options

Ref API

Example

See also

​Import

​Signature

​Default behavior

​Props

​bubbleMenu options

​Ref API

​Example

​See also

Import

Signature

Default behavior

Props

bubbleMenu options

Ref API

Example

See also