Inspector panel
A side panel that shows and edits the properties of whatever object is currently selected.
See it
What it is
An inspector panel is a side panel whose controls describe and edit the object currently selected in the main canvas or workspace. Figma's right sidebar is a familiar example: select a layer and the panel changes to its position, size, appearance, and export properties.
Use one in editors, builders, diagramming tools, and admin interfaces where selection drives a substantial set of settings. It keeps the workspace visible while exposing details that would overwhelm an inline toolbar or require too many modal dialogs.
Gotcha: the panel and selection must share one source of truth. Rapid selection changes should never apply a delayed edit to the previous object, and multi-selection needs honest mixed-value states rather than invented defaults. Preserve unfinished input while the selected object updates, label every field, and let keyboard users move between the workspace and inspector predictably.
Ask AI for it
Build a resizable inspector panel on the right side of a canvas editor. Use CSS Grid for the canvas and aside, add a 4px visible drag handle with a 12px invisible hit area that uses Pointer Events setPointerCapture(), and clamp the panel width between 280px and 480px. Drive every controlled form field from the selected object ID in a normalized Zustand store. Group controls under collapsible sections for Position, Size, Appearance, and Export; use labelled number inputs, color inputs, and selects with visible :focus-visible states. Show an empty prompt when nothing is selected and a mixed-value placeholder for properties that differ across a multi-selection.