Editor Overview

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

Workspace Anatomy

┌──────────────────────────────────────────────────────────────────┐
│  Header (Logo, Theme Switch, Cloud Menu, User Menu)               │
├────────┬──────────────────────────────────────────────┬──────────┤
│        │  Option Bar (context-sensitive tool options)  │          │
│  Side  ├──────────────────────────────────────────────┤  Right   │
│  Bar   │                                              │  Panel   │
│        │             Stage / Viewport                  │  (Info,  │
│  (Tool │          (Canvas + Overlays)                  │  Layers) │
│  Draw- │                                              │          │
│  ers)  │                                              │          │
│        ├──────────────────────────────────────────────┤          │
│        │  Dock (Tab panels, timeline, etc.)            │          │
├────────┴──────────────────────────────────────────────┴──────────┤
│  Footer (Status bar, zoom controls)                               │
└──────────────────────────────────────────────────────────────────┘

Slot Regions

Every panel, tool, and overlay is a plugin rendered into a named slot:

Slot	Location	Contents
`SIDE_BAR`	Left column	Tool drawers (Crop, Adjustment, Brush, Text, etc.)
`OPTION_BAR`	Top strip	Context-sensitive options for the active tool
`VIEWPORT_OVERLAY`	Over the canvas	Handles, guides, selection outlines
`STAGE_OVERLAY`	Stage-level layer	Pixel grid, rulers, smart guides
`DOCK`	Bottom area	Layer panel tabs, history, etc.
`HIDDEN`	No UI	Background services (TimeTraveler, clipboard, etc.)
Right Panel	Right column	Layer tree, Info panel

Theme System

OpenGPEX supports Light and Dark themes with a single click via the header toggle:

Themes are controlled by a CSS class on <html> (dark / light)
All colors use CSS custom properties (--bg-main, --text-main, --accent, etc.)
Plugins inherit theme automatically — no extra work needed

Panel Navigation

Sidebar Tools

Click any icon in the left sidebar to open its drawer panel. Only one drawer can be active at a time — clicking another tool closes the previous.

Option Bar

The option bar dynamically shows controls relevant to the currently active tool. For example:

Crop active → shows aspect ratio presets, apply/cancel buttons
Brush active → shows brush size, opacity, hardness sliders

Right Panel

The right panel contains persistent panels (Layer tree, Info) that remain visible regardless of the active tool.

Responsive Behavior

On screens < 1024px, the sidebar collapses to icon-only mode
The right panel hides on narrow viewports and becomes accessible via a toggle
The dock area is collapsible via drag handle

Keyboard-First Design

All primary actions are accessible via keyboard shortcuts. Press ? or Ctrl+/ to open the shortcut reference overlay.

Next Steps

Layers & Frames — Understanding the data model
Tools & Interactions — How tools work
Plugin System Overview — How plugins populate slots

Last updated: 2026-06-14