Skip to main content
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>
  );
}
​
asChild
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

Meant for inspecting and changing things 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 />
​
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. 
<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. 
<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. 
<Inspector.Breadcrumb />
​
children
(segments: InspectorBreadcrumbSegment[]) => ReactNode
Optional render prop for completely custom breadcrumb rendering.
Each segment includes:
​
node
FocusedNode | null
The node for this breadcrumb segment. null represents the root layout item.
​
focus
() => void
Focuses the corresponding node or the document root.

​
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} initialCollapsed />
      <Inspector.Border {...context} initialCollapsed />
    </>
  )}
</Inspector.Node>
Each section component accepts an initialCollapsed?: boolean prop.
ComponentContextDescription
Inspector.AttributesNodeEditable attribute fields based on the local attribute schema
Inspector.BackgroundNodeBackground color editor
Inspector.BorderNodeBorder width, color, style, and radius controls
Inspector.LinkTextRead-only URL plus link color controls for active links
Inspector.PaddingNodeFour-sided padding editor
Inspector.SizeNodeWidth and height controls
Inspector.TypographyNode or TextTypography, 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';