Slots & UI

Plugins render into predefined slot regions within the editor workspace. This page details all available slots, visibility policies, Z-index conventions, and the contribution system.

Available Slots

Slot Constant	Location / Context	Typical Plugins / Purpose
`SIDE_BAR`	Sidebar drawers (left & right sides)	Crop, Adjustment, Brush, Text, Image Info, AI Bridge
`OPTION_BAR`	Top strip (below header)	Tool-specific option panels (aspect ratio, zoom)
`DOCK`	Bottom tab panel area	Layer panel, History panel, Timeline
`TL` / `TR` / `BL` / `BR`	Viewport corner widgets	Anchored viewport HUD actions and status widgets
`VIEWPORT_OVERLAY`	Over the canvas (pointer-interactive)	Crop handles, selection outline, interactive frames
`STAGE_OVERLAY`	Stage-level layer (non-interactive)	Pixel grid, rulers, snapping guides
`STAGE_GIZMOS`	Interactive transform & crop tools	Free transform handles, crop boundaries
`ROOT_OVERLAY`	App-level absolute layers	Global notifications, dialogs, loading spinner overlays
`TOOL_MENU`	Left vertical toolbar	Cursor interaction tools selection menu
`HIDDEN`	No visual UI	TimeTraveler, Clipboard service, background hooks

Show Policies

The show property determines when a plugin's UI is rendered:

Policy	Behavior
`'always-show'`	Visible whenever the editor is open (regardless of document state)
`'frame-required'`	Visible only when at least one frame/document is loaded

Most tools use 'frame-required' because they operate on layer data that doesn't exist without a document.

Z-Index Protocol

The workspace defines strict Z-index layers to prevent overlap conflicts:

Z-Index	Layer	Content
100	Volatile Layer	Dragging/panning shadow elements
200	Workspace Rulers	Edge pixel ruler scales
300	Workspace Grid	Background grid, smart guides
400	Plugin Controls	Crop handles, resize anchors, gizmos
500	Floating UI	Context menus, tooltip overlays

Within each slot, plugins are ordered by the order property (lower = rendered first / further back).

Sidebar Drawer Behavior

For SIDE_BAR plugins:

Clicking a sidebar icon toggles its drawer panel
Multiple drawers can be open concurrently across Left/Right columns
The side property ('left' | 'right') determines default placement
Users can drag-and-drop sidebar icons to reorder or swap between columns
Drawer panel width dynamically adjusts based on content

Contributions System

Plugins can donate additional UI to external slots via the contributions array:

export const plugin: EditorPlugin = {
  // ...
  contributions: [
    {
      slot: 'OPTION_BAR',
      component: MyOptionsBarWidget,
    },
  ],
};

This allows a SIDE_BAR plugin to also contribute an options strip to the top bar without creating a separate plugin.

Next Steps

Plugin System Overview — Architecture context
Your First Plugin — See slots in practice
Plugin API Reference — Hook documentation

Last updated: 2026-07-30