Editor Overview

A visual tour of the OpenGPEX workspace — how the editor is organized and how to navigate between panels and tools.

Workspace Layout

┌──────────────────────────────────────────────────────────────────┐
│  Header (Logo, Theme, Cloud Menu, User Menu)                      │
├────────┬──────────────────────────────────────────────┬──────────┤
│        │  Option Bar (context-sensitive tool options)  │          │
│  Left  ├──────────────────────────────────────────────┤  Right   │
│  Side- │                                              │  Side-   │
│  bar   │             Stage / Viewport                 │  bar     │
│  (Tool │         (Canvas + HUD Overlays)              │  (Tool   │
│  Draw- │                                              │  Draw-   │
│  ers)  │                                              │  ers)    │
│        ├──────────────────────────────────────────────┤          │
│        │  Dock (Tabbed panels: Layers, History)       │          │
└────────┴──────────────────────────────────────────────┴──────────┘

Area	Purpose
Header	Global actions: theme toggle, cloud sync, user account
Sidebar Drawers	Collapsible panels (Layers, Adjustments, AI Tools, Image Info) — drag to reorder or swap sides
Tool Menu	Vertical palette of drawing/selection tools
Option Bar	Context-sensitive controls for the active tool
Stage / Viewport	Main canvas with tiled rendering engine
Dock	Bottom tabs for layer management and action history

Plugin Slot System

Every UI element is a plugin rendered into a named slot:

Slot	Location	Examples
`SIDE_BAR`	Left/right drawers	Layers, Adjustments, AI Bridge
`OPTION_BAR`	Top strip	Crop Options, Color Picker, Viewport Controls
`DOCK`	Bottom tabs	Layer list, History
`VIEWPORT_OVERLAY`	Over the canvas	Selection handles, transform gizmos
`STAGE_OVERLAY`	Behind layers	Pixel grid, smart guides
`HIDDEN`	Background service	Undo manager, autosave

Theme System

OpenGPEX supports Light and Dark themes via a single toggle in the header. All colors use CSS custom properties, and plugins inherit the active theme automatically.

Responsive Behavior

Right sidebar collapses on narrow viewports
Dock area is collapsible via drag handle
Layout adapts dynamically to container size changes

Last updated: 2026-07-30