Getting Started with the Editor

This guide walks through launching the editor and introduces the main areas of the workspace.

Prerequisites

• Node.js >= 20.0.0
• pnpm >= 9.0.0
• A modern browser with WebGPU support (Chrome 113+, Edge 113+, Safari 18+, Firefox Nightly with flags)

Running the Editor

The editor consists of two parts: a frontend SolidJS app and a backend Node.js server.

1. Install Dependencies

From the monorepo root:

pnpm install

2. Build Packages

The editor depends on many engine packages. Build them first:

pnpm build

3. Start the Editor Server

The editor server provides filesystem access, asset importing, build execution, and Git operations:

pnpm --filter @web-engine-dev/editor-server dev

This starts the server in watch mode using tsx. By default it serves from the current working directory.

4. Start the Editor Frontend

In a separate terminal:

pnpm --filter @web-engine-dev/editor dev

Or from the directory directly:

cd apps/editor
pnpm dev

This starts the Vite dev server. Open the URL shown in the terminal (typically http://localhost:5173).

Workspace Tour

When the editor loads, you see the default layout with five panels. Additional panels can be opened from the View menu or the command palette (Ctrl+Shift+P / Cmd+Shift+P).

Viewport

The central panel renders the 3D scene using WebGPU. Key interactions:

• Orbit: Right-click + drag to orbit the camera
• Pan: Middle-click + drag to pan
• Zoom: Scroll wheel
• Select: Left-click on an entity; Shift+click to add to selection
• Gizmos: Translate (W), Rotate (E), Scale (R), toggle local/world space (X)
• Marquee select: Left-click + drag on empty space to box-select entities

The viewport toolbar shows the current gizmo mode, coordinate space, and camera controls.

Hierarchy

The left panel displays all entities in the scene as a tree. Features:

• Drag-and-drop to reparent entities
• Visibility toggle (eye icon) to hide entities in the viewport
• Lock toggle (lock icon) to prevent selection and editing
• Context menu (right-click) for create, duplicate, delete, rename
• Prefab indicators (diamond icon) for prefab instances
• Scene sections when multiple scenes are loaded

Inspector

The right panel shows properties of the selected entity (or asset). Features:

• Transform editor with position, rotation, scale fields and number scrubbing
• Component editors -- specialized UIs for Camera, Light, Material, Collider, Animation, AudioSource, and more
• Add Component button with searchable dropdown and categories
• Prefab override indicators showing which properties differ from the source prefab
• Multi-entity editing when multiple entities are selected (shows shared components)
• Debug mode (Ctrl+Shift+D) for raw JSON entity view
• Lock toggle to keep the inspector focused on a specific entity

Console

A tabbed bottom panel that captures log output:

• Filter by level: Info, Warning, Error, Performance
• Filter by category: General, Rendering, Physics, Audio, Editor, Script, Performance
• Collapse duplicate messages with occurrence counts
• Expandable stack traces for errors
• Pin important messages
• Copy messages to clipboard

Assets

A tabbed bottom panel for browsing and managing project assets:

• Grid and list view modes
• Folder navigation with breadcrumb trail
• Import files by drag-and-drop or file picker
• Create new assets: scripts (Component, System, Startup), materials, prefabs, scenes
• Asset preview -- select an asset to see a preview in the Asset Preview panel
• Drag-and-drop assets into the viewport or hierarchy to instantiate them
• Context menu for rename, delete, duplicate, reimport
• Sort by name, type, size, or date

Additional Panels

These panels are not shown by default but can be opened from the View menu:

Panel	Purpose
Build	Configure and run project builds with stage progress and log output
Build Report	Post-build analysis with output sizes, timing breakdown, and diagnostics
Scene	Scene-level settings for environment, fog, shadows, and post-processing
Profiler	Real-time performance monitoring with FPS, draw calls, system timings, and memory
Timeline	Keyframe animation editor with tracks, curves, and playback controls
Settings	Editor preferences: general, viewport, theme, and shortcut configuration
Plugins	View and manage editor plugins with state indicators and configuration
VCS	Git integration with changes, history, blame, diff views, and branch management
Collaboration	Multi-user session with presence, chat, and entity locks
Test Runner	Run and view test results organized by suite
Asset Preview	Rich preview for the selected asset (images, audio, code, materials)
Script Editor	In-editor script editing with tabs and save support

Keyboard Shortcuts

Common shortcuts in the editor:

Shortcut	Action
Ctrl+Z / Cmd+Z	Undo
Ctrl+Shift+Z / Cmd+Shift+Z	Redo
Ctrl+S / Cmd+S	Save scene
Ctrl+Shift+P / Cmd+Shift+P	Command palette
W	Translate gizmo
E	Rotate gizmo
R	Scale gizmo
X	Toggle local/world space
Delete	Delete selected entities
Ctrl+D / Cmd+D	Duplicate selection
F	Focus viewport on selection
Ctrl+A / Cmd+A	Select all
Escape	Clear selection