Preview toolbar

A floating toolbar over a live preview for pointing at what to change: select an element, edit text, draw or comment, with single-key shortcuts and a selection outline.

Markdown

On this page

Select an element, edit text, draw or comment on a live preview. Try S, T, D and C.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/preview-toolbar.json

Usage

tsx

import { PreviewSelection, PreviewToolbar } from "@/components/ui/chatcn/preview-toolbar"

<div className="relative">
  <iframe src={previewUrl} />
  {selected ? <PreviewSelection rect={selected.rect} label="Button" /> : null}
  <PreviewToolbar tool={tool} onToolChange={setTool} />
</div>

The toolbar floats at the bottom center of its positioned parent. It owns the tool state and the shortcuts; you own what each tool does to your preview. PreviewSelection draws the outline and the name and size chip for any box you measure.

Props

PreviewToolbar

Prop	Type	Notes
`tool`, `defaultTool`, `onToolChange`	`PreviewTool \| null`	`select`, `edit`, `draw`, `comment`, or null to interact normally
`tools`	`PreviewTool[]`	Which tools, in order. Default all four
`shortcuts`	`boolean`	S, T, D, C and Esc outside text fields. Default `true`
`position`	`"bottom" \| "top" \| "none"`	Default `bottom`
`hint`	`ReactNode`	Shown next to the tools while one is active. `null` hides it
`children`	`ReactNode`	Extra actions after a divider

PreviewSelection

Prop	Type	Notes
`rect`	`{ x, y, width, height }`	Px, relative to the positioned parent
`label`	`ReactNode`	Chip text, for example a tag or component name
`variant`	`"hover" \| "selected"`	Hover is a light outline. Selected adds handles and the chip
`hideSize`	`boolean`	Hide the width by height readout

Keyboard

Key	Action
`S`	Select element
`T`	Edit text
`D`	Draw
`C`	Comment
The same key again, or `Esc`	Back to interacting with the preview
`Left`, `Right`, `Home`, `End`	Move between tools inside the toolbar

Accessibility

role="toolbar" with roving focus, so it is one tab stop. Tools are toggle buttons with aria-pressed and aria-keyshortcuts.
Shortcuts never fire while typing in a field, a contenteditable or during IME composition, and never with a modifier held.
Tool buttons are 32 px, 44 px on touch screens. Tooltips name each tool and its key.

Motion

The active-tool indicator slides over 200 ms when a tool is clicked. A shortcut moves it instantly.
A new selection fades in over 120 ms. The hover outline follows the pointer without easing.