Inspector

The Inspector is a sidebar that provides a way to inspect and edit the email’s properties. From the Inspector, you can edit document, node, and text properties such as colors, fonts, and padding. View a minimal example of the Inspector at the Standalone Editor Inspector demo page. Everything is accessed through a single import:

import { Inspector } from '@react-email/editor/ui';

Inspector.Root must be rendered inside the current editor context, and it requires the EmailTheming extension to be present in the editor.

Core components

Inspector.Root

Wraps your inspector UI and decides which panel should be active based on the current selection.

import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
import { Inspector } from '@react-email/editor/ui';
import { EditorContent, EditorContext, useEditor } from '@tiptap/react';

const extensions = [StarterKit, EmailTheming];

export function MyEditor() {
  const editor = useEditor({
    extensions,
    content,
  });

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="flex">
        <EditorContent editor={editor} />
        <Inspector.Root className="w-60 shrink-0 border-l p-4">
          <Inspector.Document />
          <Inspector.Node />
          <Inspector.Text />
        </Inspector.Root>
      </div>
    </EditorContext.Provider>
  );
}

If you use the standalone EmailEditor component, pass the inspector as a child. No EditorContext.Provider is needed. See the Inspector feature guide.

Inspector.Root already wraps itself in EditorFocusScope by default, so the Inspector handles the editor’s focus idiomatically and reliably. Add EditorFocusScope yourself only when custom inspector controls render additional portaled content.

boolean

default:"false"

Render without the default aside wrapper and pass props to the child via Radix UI’s Slot.

All standard props from aside are also supported if asChild is false.

Inspector.Document

This is meant for inspecting and changing properties related to the entire editor’s content. That is, EmailTheming, page-level settings, and other document-wide concerns. It shows up when the editor is not focused on a specific node or text selection, or when the editor is unfocused.

<Inspector.Document />

(context: InspectorDocumentContext) => ReactNode

Optional render prop. When provided, you receive the document inspector context instead of the default UI.

InspectorDocumentContext

PanelGroup[]

Theme-backed document style groups after merging defaults.

(classReference, property, value) => void

Updates a single document-level style.

(changes) => void

Applies multiple document style changes at once.

(classReference, property) => string | number

Reads the current or default value for a document style.

Inspector.Node

Renders when a node is focused or selected. Without children, it shows the default node-specific sections for the active node type.

<Inspector.Node />

(context: InspectorNodeContext) => ReactNode

Optional render prop. When provided, you receive the node inspector context instead of the default UI.

InspectorNodeContext

string

Active node type, such as image, button, or section.

{ pos: number; inside: number }

ProseMirror position information for the focused node.

(prop) => string | number | undefined

Reads a resolved style value for the node.

(prop, value) => void

Updates one inline style on the focused node.

(changes) => void

Applies multiple inline style updates in one call.

(name) => unknown

Reads a node attribute.

(name, value) => void

Updates a node attribute.

Record<string, string | number | undefined>

Resolved theme defaults for the current node.

string[]

Colors collected from the current document.

Inspector.Text

Renders when text is selected. Without children, it shows typography controls and link controls when a link mark is active.

<Inspector.Text />

(context: InspectorTextContext) => ReactNode

Optional render prop. When provided, you receive the text inspector context instead of the default UI.

InspectorTextContext

Record<string, boolean>

Active text marks like bold, italic, and underline.

(mark: string) => void

Toggles a text mark on the current selection.

string

Current block alignment.

(value: string) => void

Updates the parent block alignment.

string

Current link URL when a link mark is active.

string

Resolved link color.

(color: string) => void

Updates the active link color.

boolean

Whether the current text selection is inside a link.

(prop) => string | number | undefined

Reads the resolved parent block style.

(prop, value) => void

Updates the parent block style.

string[]

Colors collected from the current document.

Renders the current path from the document root to the focused node.

<Inspector.Breadcrumb />

(segments: InspectorBreadcrumbSegment[]) => ReactNode

Optional render prop for completely custom breadcrumb rendering.

Each segment includes:

FocusedNode

The node for this breadcrumb segment. The root segment is the body node.

() => void

Focuses the corresponding node.

Use getNodeMeta(nodeType) to get the label and icon the default breadcrumb uses for a given node type:

import { getNodeMeta } from '@react-email/editor/ui';

<Inspector.Breadcrumb>
  {(segments) =>
    segments.map((segment, i) => {
      const { label } = getNodeMeta(segment.node.nodeType);
      return (
        <button key={i} type="button" onClick={() => segment.focus()}>
          {label}
        </button>
      );
    })
  }
</Inspector.Breadcrumb>

Built-in sections

Use these inside custom Inspector.Node or Inspector.Text render functions to reuse the default section UIs in your own layout.

<Inspector.Node>
  {(context) => (
    <>
      <Inspector.Size {...context} />
      <Inspector.Padding {...context} />
      <Inspector.Border {...context} />
    </>
  )}
</Inspector.Node>

Component	Context	Description
`Inspector.Attributes`	Node	Editable attribute fields based on the local attribute schema
`Inspector.Background`	Node	Background color editor
`Inspector.Border`	Node	Border width, color, style, and radius controls
`Inspector.Link`	Text	Read-only URL plus link color controls for active links
`Inspector.Padding`	Node	Four-sided padding editor
`Inspector.Size`	Node	Width and height controls
`Inspector.Typography`	Node or Text	Typography, formatting, and alignment controls

CSS import

import '@react-email/editor/styles/inspector.css';

@react-email/editor/themes/default.css bundles all UI component styles. Unless you need to cherry-pick, use this single import:

import '@react-email/editor/themes/default.css';

Overview

Features

Advanced

API Reference

Core components

Inspector.Root

Inspector.Document

InspectorDocumentContext

Inspector.Node

InspectorNodeContext

Inspector.Text

InspectorTextContext

Built-in sections

CSS import

​Core components

​Inspector.Root

​Inspector.Document

​InspectorDocumentContext

​Inspector.Node

​InspectorNodeContext

​Inspector.Text

​InspectorTextContext

​Inspector.Breadcrumb

​Built-in sections

​CSS import

Core components

Inspector.Root

Inspector.Document

InspectorDocumentContext

Inspector.Node

InspectorNodeContext

Inspector.Text

InspectorTextContext

Inspector.Breadcrumb

Built-in sections

CSS import