Editor Panels

The editor workspace is built from dockable panels. Each panel is a SolidJS component registered in the PanelRegistry. Panels can be dragged, resized, tabbed together, and rearranged into any configuration.

Core Panels

These five panels form the default layout and are the primary workspace:

Viewport

ID: viewport

Renders the 3D scene via a WebGPU canvas. The viewport runs its own render loop through EditorRenderSystem, which renders to an offscreen target and composites gizmo overlays, selection outlines (via JFA), and the grid.

Key features:

• Orbit, fly, and pan camera modes
• Translate, Rotate, Scale gizmo transforms via GizmoTransformHandler
• Marquee (box) selection
• Viewport toolbar with gizmo mode, coordinate space, and camera settings
• Orientation gizmo showing current camera direction
• Component gizmos (light radius, camera frustum, audio range) via ComponentGizmoManager
• Viewport settings popover for grid, post-processing, and debug visualization

The viewport panel uses alwaysRender mode in dockview so the canvas stays alive even when the panel tab is hidden.

Hierarchy

ID: hierarchy

Displays all entities in the scene as a tree structure. Entities are organized by their parent-child relationships defined through the ECS hierarchy system.

Key features:

• Drag-and-drop reparenting with world-transform preservation
• Per-entity visibility toggle (hides from viewport)
• Per-entity lock toggle (prevents selection and editing)
• Multi-selection with Shift+click and Ctrl+click
• Context menu: create entity, create child, duplicate, delete, rename, copy/paste
• Prefab instance indicators (diamond icon)
• Scene section headers when multiple scenes are loaded
• Search filter for finding entities by name
• Marquee selection within the hierarchy list

Inspector

ID: inspector

Displays and edits the properties of the selected entity or asset. The inspector uses a provider-based architecture through InspectionProviderRegistry, handling both entity inspection and asset inspection in a unified view.

Key features:

• Specialized editors for common components:
  • Transform: Position, rotation, scale with number scrubbing
  • Camera: Projection mode, FOV, clipping planes
  • Lights: Directional, point, spot with color, intensity, range
  • Material: PBR properties, textures, blend modes
  • Collider: Shape type, dimensions, physics properties
  • Animation: Clip selection, playback controls
  • AudioSource: Volume, pitch, spatial settings
  • Rigidbody: Mass, drag, constraints
• Add Component button with searchable, categorized dropdown
• Remove component via component header context menu
• Multi-entity editing (shows intersection of shared components)
• Prefab override indicators and revert-to-source actions
• Inspector lock (pin) to keep focus on a specific entity
• Debug mode (Ctrl+Shift+D) for raw entity JSON view
• Asset inspection when an asset is selected in the Asset Browser

Console

ID: console

Captures and displays log output from the engine and editor systems.

Key features:

• Four log levels: Info, Warning, Error, Performance
• Seven categories: General, Rendering, Physics, Audio, Editor, Script, Performance
• Level and category filtering
• Collapse duplicate messages with occurrence counts
• Expandable stack traces on error entries
• Pin important messages to keep them visible
• Copy individual messages or full log to clipboard
• Auto-scroll to latest messages
• Budget violation detection from PerformanceMonitor
• Virtual scrolling for handling up to 5,000 log entries

Asset Browser

ID: assets

Provides a file-explorer-like view of all project assets.

Key features:

• Grid view with thumbnails or list view with metadata columns
• Folder tree navigation with breadcrumb trail
• Import files via drag-and-drop or OS file picker
• Create new assets: scripts (Component, System, Startup templates), materials, prefabs, scenes
• Sorting by name, type, size, or modification date
• Asset type icons and metadata display
• Context menu: rename, delete, duplicate, reimport, show in folder
• Drag assets into viewport or hierarchy to instantiate
• Import settings dialog for configurable import options
• Marquee selection for multi-select

Secondary Panels

These panels are available from the View menu or command palette but are not part of the default layout:

Build

ID: build

Configure and execute project builds.

• Build profile selection and configuration
• Build mode (development/production) and artifact mode
• Stage-by-stage progress display (Validate, Collect Assets, Process Scenes, Process Assets, Bundle, Optimize, Package)
• Filterable build log with Info/Warning/Error levels
• Build duration and output size summary
• Run-after-build option to launch the playable output

Build Report

ID: build-report

Post-build analysis dashboard.

• Summary: total size, duration, warnings, errors
• Output file listing with individual sizes
• Category breakdown (scripts, assets, scenes)
• Per-stage timing breakdown
• Diagnostic messages

Scene

ID: scene

Scene-level environment settings.

• Ambient light color and intensity
• Fog configuration (type, color, density, start/end distance)
• Shadow settings (resolution, bias, cascade count)
• Skybox configuration
• Post-processing toggles

Profiler

ID: profiler

Real-time performance monitoring with four tabs:

• Overview: FPS graph, frame time, draw calls, triangle count
• Rendering: Detailed GPU metrics and render pass breakdown
• Systems: Per-ECS-system timing bars
• Memory: Heap usage and allocation tracking
• Recording mode for capturing performance snapshots
• Budget violation alerts

Timeline

ID: timeline

Keyframe animation editor.

• Track list with signal and transform tracks
• Keyframe placement on a time ruler
• Playback controls: play, pause, stop, step, loop
• Interpolation mode selection (linear, ease, step)
• Zoom and scroll on the timeline view
• Integration with the @web-engine-dev/timeline package

Settings (Preferences)

ID: settings

Editor preference configuration organized into categories:

• General: Auto-save interval, tooltips, animations, undo limit, font size
• Viewport: Grid settings, gizmo sizes, camera defaults
• Theme: Light/dark base theme with token overrides
• Shortcuts: Keybinding editor with conflict detection

Settings are persisted through SessionManager.

Plugins

ID: plugins

Plugin management interface.

• Lists all registered plugins with state indicators (Activated, Loaded, Degraded, Error, Unloaded)
• Plugin details: version, author, capabilities
• Activate/deactivate toggles
• Per-plugin configuration when a config schema is provided
• Engine plugin bridge showing registered engine-level plugins

VCS (Version Control)

ID: vcs

Git integration panel with three tabs:

• Changes: Modified, added, deleted files with staging controls and commit form
• History: Commit log with author, date, and diff view
• Blame: Per-line blame annotations for the selected file
• Branch selector and remote sync status (ahead/behind indicators)
• Unified and side-by-side diff view modes

Collaboration

ID: collaboration

Multi-user collaboration panel with three tabs:

• Session: Connection status, user list with presence indicators, join/leave
• Chat: Real-time chat between collaborators
• Locks: Entity lock management to prevent editing conflicts

Test Runner

ID: test-runner

Run and display test results.

• Test suite tree with pass/fail/skip indicators
• Per-test duration and error output
• Run all, run suite, or run individual test
• Expandable error stack traces

Asset Preview

ID: asset-preview

Rich preview for the currently selected asset:

• Textures: Full-resolution image with checkerboard background, zoom/pan, channel isolation (R, G, B, A, RGB), fit-to-view
• Audio: Play/pause/stop, seek bar, volume, loop toggle, duration display
• Scripts/Shaders: Source code with line numbers and copy button
• Materials: PBR property summary with color swatches
• Other: Type icon with metadata summary

Script Editor

ID: script-editor

In-editor script editing:

• Multi-tab interface for opening multiple scripts
• Syntax-highlighted code editing
• Save with Ctrl+S / Cmd+S
• Modified indicator on unsaved tabs
• Integration with asset database for script asset tracking

Panel Registration System

Panels are registered using the PanelRegistry module (apps/editor/src/layout/PanelRegistry.ts). Each panel is defined by a PanelDefinition:

interface PanelDefinition {
  readonly id: string;
  readonly title: string;
  readonly component: Component<{ params?: Record<string, unknown> }>;
  readonly alwaysRender?: boolean;       // Keep alive when tab is hidden
  readonly selectionBehavior?: 'clear' | 'preserve' | 'custom';
}

Registration is straightforward:

import { registerPanel } from '../layout/PanelRegistry.js';

registerPanel({
  id: 'my-panel',
  title: 'My Panel',
  component: MyPanelComponent,
});

When the ExtensionRegistry is initialized, panel registrations also create PanelContribution entries so plugins can discover available panels.

Selection Behavior

The selectionBehavior property controls how clicking the panel background affects entity selection:

• 'clear' (default): Background clicks clear all selections
• 'preserve': Clicks never affect selection (used by Inspector, Asset Preview, Viewport)
• 'custom': Panel handles selection logic internally

Layout Persistence

Layouts are serialized through dockview's toJSON() and stored via SessionManager plugin config. On startup, the editor attempts to restore the saved layout; if restoration fails (e.g., stale schema), it falls back to the default layout.

Key layout operations from DockviewService:

Function	Purpose
openPanel(id)	Open a panel (or activate if already open)
resetLayout()	Reset to the default layout
loadBuiltinPreset(id)	Apply a built-in layout preset
saveLayoutPreset(name)	Save current layout as a named preset
loadLayoutPreset(name)	Restore a named preset
exportLayout()	Export layout as JSON string
importLayout(json)	Import layout from JSON string