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 '@vuemaildev/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.

<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import { EmailTheming } from '@vuemaildev/editor/plugins';
import { Inspector } from '@vuemaildev/editor/ui';

const extensions = [StarterKit, EmailTheming];
</script>

<template>
  <div class="flex">
    <EditorProvider :extensions="extensions" :content="content">
      <Inspector.Root class="w-60 shrink-0 border-l p-4">
        <Inspector.Document />
        <Inspector.Node />
        <Inspector.Text />
      </Inspector.Root>
    </EditorProvider>
  </div>
</template>

If you use the standalone EmailEditor component, pass the inspector as a child. No EditorProvider 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 its attributes to the child element, like reka-ui’s asChild.

All standard attributes of aside are also supported if as-child 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) => VNode[]

Optional scoped slot. When provided, it receives the document inspector context instead of rendering 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 a default slot, it shows the default node-specific sections for the active node type.

<Inspector.Node />

(context: InspectorNodeContext) => VNode[]

Optional scoped slot. When provided, it receives the node inspector context instead of rendering 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 a default slot, it shows typography controls and link controls when a link mark is active.

<Inspector.Text />

(context: InspectorTextContext) => VNode[]

Optional scoped slot. When provided, it receives the text inspector context instead of rendering 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 }: { segments: InspectorBreadcrumbSegment[] }) => VNode[]

Optional scoped slot 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:

<script setup lang="ts">
import { getNodeMeta, Inspector } from '@vuemaildev/editor/ui';
</script>

<template>
  <Inspector.Breadcrumb v-slot="{ segments }">
    <button
      v-for="(segment, i) in segments"
      :key="i"
      type="button"
      @click="segment.focus()"
    >
      {{ getNodeMeta(segment.node.nodeType).label }}
    </button>
  </Inspector.Breadcrumb>
</template>

Built-in sections

Use these inside custom Inspector.Node or Inspector.Text slots to reuse the default section UIs in your own layout. They take the context of the slot as props.

<Inspector.Node v-slot="context">
  <Inspector.Size v-bind="context" />
  <Inspector.Padding v-bind="context" />
  <Inspector.Border v-bind="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 '@vuemaildev/editor/styles/inspector.css';

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

import '@vuemaildev/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