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

# Inspector

> Contextual sidebar components for document, node, and text editing.

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](https://react.email/editor/examples/standalone-editor-inspector) demo page.

Everything is accessed through a single import:

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

`Inspector.Root` must be rendered inside the current editor context, and it
requires the [EmailTheming](https://react.email/docs/editor/api-reference/theming-api.md) 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.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
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>
  );
}
```

> [!TIP]
>
> If you use the standalone `EmailEditor` component, pass the inspector as a
> child. No `EditorContext.Provider` is needed. See the
> [Inspector feature guide](https://react.email/docs/editor/features/inspector.md#using-with-emaileditor).

> [!TIP]
>
> `Inspector.Root` already wraps itself in
> [EditorFocusScope](https://react.email/docs/editor/api-reference/ui/editor-focus-scope.md) 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.

**asChild** `boolean` (default: false)

Render without the default `aside` wrapper and pass props to the child via
Radix UI's [Slot](https://www.radix-ui.com/primitives/docs/utilities/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](https://react.email/docs/editor/api-reference/theming-api.md), 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.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
<Inspector.Document />
```

**children** `(context: InspectorDocumentContext) =\> ReactNode`

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

#### InspectorDocumentContext

**styles** `PanelGroup[]`

Theme-backed document style groups after merging defaults.

**setGlobalStyle** `(classReference, property, value) =\> void`

Updates a single document-level style.

**batchSetGlobalStyle** `(changes) =\> void`

Applies multiple document style changes at once.

**findStyleValue** `(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.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
<Inspector.Node />
```

**children** `(context: InspectorNodeContext) =\> ReactNode`

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

#### InspectorNodeContext

**nodeType** `string`

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

**nodePos** `\{ pos: number; inside: number \}`

ProseMirror position information for the focused node.

**getStyle** `(prop) =\> string | number | undefined`

Reads a resolved style value for the node.

**setStyle** `(prop, value) =\> void`

Updates one inline style on the focused node.

**batchSetStyle** `(changes) =\> void`

Applies multiple inline style updates in one call.

**getAttr** `(name) =\> unknown`

Reads a node attribute.

**setAttr** `(name, value) =\> void`

Updates a node attribute.

**themeDefaults** `Record\<string, string | number | undefined\>`

Resolved theme defaults for the current node.

**presetColors** `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.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
<Inspector.Text />
```

**children** `(context: InspectorTextContext) =\> ReactNode`

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

#### InspectorTextContext

**marks** `Record\<string, boolean\>`

Active text marks like `bold`, `italic`, and `underline`.

**toggleMark** `(mark: string) =\> void`

Toggles a text mark on the current selection.

**alignment** `string`

Current block alignment.

**setAlignment** `(value: string) =\> void`

Updates the parent block alignment.

**linkHref** `string`

Current link URL when a link mark is active.

**linkColor** `string`

Resolved link color.

**setLinkColor** `(color: string) =\> void`

Updates the active link color.

**isLinkActive** `boolean`

Whether the current text selection is inside a link.

**getStyle** `(prop) =\> string | number | undefined`

Reads the resolved parent block style.

**setStyle** `(prop, value) =\> void`

Updates the parent block style.

**presetColors** `string[]`

Colors collected from the current document.

### Inspector.Breadcrumb

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

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
<Inspector.Breadcrumb />
```

**children** `(segments: InspectorBreadcrumbSegment[]) =\> ReactNode`

Optional render prop for completely custom breadcrumb rendering.

Each segment includes:

**node** `FocusedNode`

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

**focus** `() =\> void`

Focuses the corresponding node.

> [!TIP]
>
> Use `getNodeMeta(nodeType)` to get the label and icon the default breadcrumb
> uses for a given node type:
>
> ```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
> 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.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
<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

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

> [!TIP]
>
> `@react-email/editor/themes/default.css` bundles all UI component styles.
> Unless you need to cherry-pick, use this single import:
>
> ```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
> import '@react-email/editor/themes/default.css';
> ```


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