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 UIContribution system.

Available Slots

Slot Constant	Location	Typical Plugins
`SIDE_BAR`	Left sidebar drawers	Crop, Adjustment, Brush, Text
`OPTION_BAR`	Top strip (below header)	Tool-specific option panels
`VIEWPORT_OVERLAY`	Over the canvas (pointer-interactive)	Crop handles, selection outline
`STAGE_OVERLAY`	Stage-level layer (non-interactive)	Pixel grid, rulers, guides
`DOCK`	Bottom tab panel area	Layer panel, History panel
`HIDDEN`	No visual UI	TimeTraveler, Clipboard service

Show Policies

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

Policy	Behavior
`'always'`	Visible whenever the editor is open
`'frame-required'`	Visible only when at least one frame exists
`'active-only'`	Visible only when this tool is the active tool
`(state) => boolean`	Custom function for conditional visibility

Z-Index Protocol

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

Range	Convention
0-99	System-level (core overlays)
100-499	Standard plugins
500-899	User plugins
900-999	Overlays that must appear on top

Sidebar Drawer Behavior

For SIDE_BAR plugins:

Only one drawer can be open at a time
Clicking a sidebar icon toggles its drawer
The side property controls left vs right placement
The drawer width is determined by the plugin's component content

UIContribution System

Plugins can contribute additional UI elements to other plugins' slots:

uiContributions: [
  {
    target: 'opengpex.panels.layer_panel',
    slot: 'context-menu',
    component: MyCustomMenuItem,
    order: 50,
  },
],

This allows plugins to extend other panels without modifying them directly.

Next Steps

Plugin System Overview — Architecture context
Your First Plugin — See slots in practice
Editor Overview — Visual workspace diagram

Last updated: 2026-06-14