Editor Overview

The Web Engine Dev editor is a web-based visual scene editor built with SolidJS and dockview-core. It provides a panel-based workspace for scene composition, entity inspection, asset management, and real-time 3D viewport rendering -- all running in the browser.

Under Active Development

The editor is functional but evolving. This documentation covers what exists and works today.

What the Editor Provides

• Real-time 3D Viewport -- WebGPU canvas with orbit/fly camera, gizmo transforms (translate, rotate, scale), selection outlines, and a grid overlay.
• Entity Hierarchy -- Tree view of all entities in the scene with drag-and-drop reparenting, visibility/lock toggles, and prefab indicators.
• Component Inspection -- Property editors for Transform, Camera, Light, Material, Collider, Animation, and other component types, with multi-entity editing support.
• Asset Browser -- Grid/list view of project assets with import, creation (scripts, materials, prefabs, scenes), drag-and-drop into the scene, and folder navigation.
• Undo/Redo -- Full command history with transaction support for grouping operations. All ECS mutations go through WorldTransaction for correct undo semantics.
• Command Palette -- Fuzzy-search command launcher (similar to VS Code's Ctrl+Shift+P).
• Build Pipeline -- Configure, run, and inspect project builds with stage progress, log filtering, and output size reports.
• Scene Management -- Create, load, and save scenes. Scene settings panel for environment, fog, shadows, and post-processing configuration.
• Version Control -- Git integration with change tracking, commit history, blame view, and diff display.
• Keyboard Shortcuts -- Configurable keybindings for all editor actions.

Architecture

The editor follows a three-layer architecture that separates headless logic from UI:

┌─────────────────────────────────────────────────┐
│  apps/editor          (SolidJS UI components)   │
│  Panels, contexts, layout, viewport rendering   │
├─────────────────────────────────────────────────┤
│  @web-engine-dev/editor-ui       (Behaviors)    │
│  EditorWorldBridge, AutoInspector, shortcuts,   │
│  asset browser state, selection rendering        │
├─────────────────────────────────────────────────┤
│  @web-engine-dev/editor-core  (Headless services)│
│  Commands, history, selection, plugins, session, │
│  config, filesystem, notifications, build, VCS   │
└─────────────────────────────────────────────────┘

editor-core (Headless Services)

The @web-engine-dev/editor-core package provides framework-agnostic services with no UI dependencies:

Service	Purpose
HistoryManager	Undo/redo stacks with dirty tracking and save points
SelectionManager	Entity selection state with add/toggle/replace modes
ExtensionRegistry	Type-safe plugin extension point registry
SessionManager	Editor preferences, layout, and recent files persistence
ConfigurationService	Scoped configuration with change signals
ProjectManager	Project open/close lifecycle and metadata
NotificationService	Toast and notification center messages
EditorFileSystem	Abstract filesystem (browser MemoryFileSystem, desktop DesktopEditorFileSystem)
LogService	Structured logging with categories and levels
BuildService	Build orchestration with stage progress and log capture
MenuRegistry	Hierarchical menu definitions with when-clauses
ThemeService	Theme management with dark/light base and token overrides
FocusService	Panel and element focus tracking
DragDropService	Type-safe drag-and-drop state machine
ContextKeyService	Conditional expressions for menu/command visibility

editor-ui (Behaviors and State)

The @web-engine-dev/editor-ui package provides UI behaviors and state management that are still decoupled from a specific component framework:

• EditorWorldBridge -- Syncs ECS world state to reactive UI signals
• AutoInspector / MultiInspector -- Automatic property editor generation from component reflection
• AssetBrowserState -- Asset filtering, sorting, and view mode state
• PanelFilterBehavior -- Reusable search/filter logic for panels
• MarqueeBehavior -- Rectangular selection in viewport and panels
• NumberScrubBehavior -- Click-drag number editing
• StatusMessageService -- Transient status bar messages

Editor App (SolidJS UI)

The apps/editor/ directory contains the SolidJS application:

• Panels -- Each panel is a SolidJS component registered in the PanelRegistry
• Contexts -- SolidJS context providers for editor services, engine, input, gizmos, etc.
• Layout -- Dockview integration with persist/restore and preset layouts
• Viewport -- WebGPU canvas, camera controller, gizmo rendering, selection masks

Editor Server

The apps/editor-server/ package provides a Node.js backend that the editor connects to for:

• Filesystem access (read/write project files on disk)
• Asset importing and thumbnail generation
• Build execution
• Git operations
• Hot reload via file watching (chokidar) and WebSocket notifications

Panel Layout

The editor uses dockview-core for a flexible, dockable panel system. Panels can be dragged, resized, tabbed, and rearranged.

Default Layout

┌──────────┬──────────────────┬──────────┐
│Hierarchy │    Viewport      │Inspector │
│          │                  │          │
│          │                  │          │
├──────────┴──────────────────┴──────────┤
│ Console / Assets (tabbed)              │
└────────────────────────────────────────┘

Built-in Presets

The editor ships with five layout presets accessible from the View menu:

Preset	Description
Default	Hierarchy left, Viewport center, Inspector right, Console/Assets bottom
2-Column	Hierarchy + Inspector stacked left, wide Viewport right
3-Column	Hierarchy left, Viewport + Console center, Inspector right (Unity-style)
Tall	Viewport top, Hierarchy / Console+Assets / Inspector bottom
Wide	Viewport full-width top, all panels in a bottom strip

Layouts are persisted through the SessionManager and restored on next launch. You can also save and load custom layout presets.

Engine Integration

The editor creates an engine instance with autoStart: false and drives its own render loop:

• RenderPlugin is loaded with enableForwardRender: false because the editor renders to an offscreen target via EditorRenderSystem
• ScriptingPlugin is loaded with enableSystems: false because the editor drives script lifecycle during play mode
• EditorPlugin registers editor-specific services (selection, history, mode manager) and the camera controller system

All entity mutations from user actions go through the command/transaction system to maintain undo/redo integrity. See the Getting Started page for setup instructions.