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, Drawing Tools, Adjustments, AI Tools, Image Info, …) — drag to reorder
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 tab dock (TabDock) for switching between creations (frames)

Plugin Slot System

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

Slot	Location	Examples
`SIDE_BAR`	Left/right drawers	Layers, Craft (Drawing Tools), Adjustments, AI Tools
`OPTION_BAR`	Top strip	Clip Options, Color Options, Viewport Options
`DOCK`	Bottom tab dock	TabDock (creation switcher)
`VIEWPORT_OVERLAY`	Over the canvas	Smart Guides
`STAGE_OVERLAY`	Canvas stage	Selection marching ants, layer outlines, pixel grid, brush/text/marker overlays
`HIDDEN`	Background service	Undo/redo (TimeTraveler), Settings, Font Loader

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