title: "Editor Overview" description: "Master the Studio interface, navigation, and core workflows. Learn the tools that will power your game development." breadcrumbs:

title: "Getting Started"
title: "Editor Overview"

Editor Overview

The Web Engine Studio is a powerful visual editor built with modern web technologies. This guide will teach you the interface, shortcuts, and workflows to work efficiently.

Interface Overview#

The Studio is divided into several panels, each serving a specific purpose. All panels can be resized, rearranged, or closed to customize your workspace.

Viewport

The central 3D view where you interact with your scene. Select, move, rotate, and scale objects in real-time.

Hierarchy Panel

Tree view of all entities in the scene. Drag to reparent, right-click to create objects, organize your scene graph.

Inspector Panel

Properties of the selected entity. Add/remove components, edit values, configure behaviors.

Assets Panel

File explorer for project assets. Import, organize, and drag assets into the scene.

The Studio uses a docking system powered by Dockview. You can drag panel tabs to reposition them, create split views, or float panels as separate windows.

Navigating the 3D viewport efficiently is essential for scene editing. The controls are similar to popular 3D software like Blender and Unity.

| Action | Input | Description | |--------|-------|-------------| | Orbit/Rotate | Right-Click + Drag | Rotate the camera around the focus point | | Pan | Middle-Click + Drag | Move the camera parallel to the view plane | | Pan (Alt) | Alt + Left-Click + Drag | Alternative pan method for mice without middle button | | Zoom | Scroll Wheel | Move closer or farther from the scene | | Focus | F key | Center the view on the selected object | | Frame All | A key | Frame all objects in the scene |

Smooth Navigation

Hold Shift while using camera controls to move faster. This is great for quickly navigating large scenes.

View Modes#

Switch between different view modes to aid your workflow. Access these via the View menu or keyboard shortcuts:

Perspective — Standard 3D view with depth perception (default)
Top (Numpad 7) — Bird's eye view, looking down the Y axis
Front (Numpad 1) — View from the front, looking down the Z axis
Right (Numpad 3) — View from the right side, looking down the X axis
Orthographic (Numpad 5) — Toggle between perspective and orthographic projection

Viewport Display Options#

Customize what's visible in the viewport via the viewport settings menu (top-right gear icon):

Grid — Toggle the infinite ground grid
Gizmos — Show/hide transform gizmos, light gizmos, camera frustums
Wireframe — View mesh wireframes for debugging
Bounding Boxes — Show entity AABBs (Axis-Aligned Bounding Boxes)
Physics Debug — Visualize colliders, rigid bodies, and physics constraints
Stats — Display performance metrics (FPS, draw calls, triangles, entities)

Transform Tools#

The transform tools let you position, rotate, and scale entities in your scene. Access them via the toolbar or keyboard shortcuts.

| Tool | Shortcut | Description | |------|----------|-------------| | Select | Q | Click to select entities without modifying them | | Move | W | Translate entities along X, Y, Z axes | | Rotate | E | Rotate entities around their pivot point | | Scale | R | Resize entities uniformly or per-axis |

Each tool displays a gizmo — a visual control with colored handles:

Red — X axis (right/left)
Green — Y axis (up/down)
Blue — Z axis (forward/back)
Yellow/White — All axes (uniform transform)

Transform Space#

Toggle between World and Local space using the Globe/Cube icon in the toolbar or press T:

World Space — Transform axes align with the global coordinate system. Useful for positioning objects relative to the world.
Local Space — Transform axes align with the entity's own rotation. Useful for moving objects relative to themselves.

Snapping#

Enable snapping for precise placement and alignment:

Toggle snap with the Magnet icon in the toolbar or press G
Hold Ctrl/Cmd while transforming to temporarily toggle snap
Configure snap increments in Edit → Preferences → Snapping:
- Position Snap: Default 0.5 units
- Rotation Snap: Default 15 degrees
- Scale Snap: Default 0.1 units

Hierarchy Panel#

The Hierarchy shows all entities in your scene as a tree structure. Parent-child relationships affect transforms, visibility, and script execution order.

Common Actions#

| Action | Input | Description | |--------|-------|-------------| | Select | Click | Select an entity | | Multi-select | Ctrl/Cmd + Click | Add to selection | | Range select | Shift + Click | Select a range of entities | | Reparent | Drag & Drop | Make entity a child of another | | Reorder | Drag between entities | Change sibling order | | Create entity | Right-click | Open context menu to create objects | | Rename | F2 or Double-click | Rename the selected entity | | Duplicate | Ctrl/Cmd + D | Duplicate the selected entity and its children | | Delete | Delete or Backspace | Delete the selected entity and its children |

Parent-Child Relationships

When you make an entity a child of another, it inherits the parent's transform. Moving, rotating, or scaling the parent affects all children. This is useful for creating complex objects (e.g., a car with wheels as children).

Right-click in the Hierarchy to access the context menu:

Create Empty — Create an empty entity (container for components)
3D Object → Cube, Sphere, Plane, Cylinder, Capsule
Light → Directional, Point, Spot, Area
Camera — Create a new camera entity
Particle System — Add visual effects
Audio Source — Add 3D positional audio
Create Prefab — Turn selected entity into a reusable prefab

Inspector Panel#

When you select an entity, the Inspector displays its components and properties. Each component can be expanded/collapsed, and has editable fields.

Adding Components#

Click the Add Component button at the bottom of the Inspector
Search for a component by name (e.g., "RigidBody", "Light", "Script")
Browse categories: Physics, Rendering, Audio, AI, Scripting, Effects
Click a component to add it to the selected entity

The Inspector features a smart search that indexes all 50+ components. You can search by:

Component name (e.g., "RigidBody")
Category (e.g., "Physics")
Functionality (e.g., "collision", "light", "sound")

Editing Component Properties#

Different field types have specialized editors:

| Field Type | Interaction | Notes | |------------|-------------|--------| | Number | Click to type, or drag left/right to scrub | Hold Shift to scrub faster, hold Alt for precision | | Vector3 | Edit X, Y, Z individually | Click the lock icon to edit all axes uniformly | | Color | Click swatch to open color picker | Supports RGB, HSL, and hex input | | Asset | Drag from Assets panel or click to browse | Automatically filters by asset type | | Boolean | Click checkbox to toggle | Can be animated and scripted | | Enum/Dropdown | Click to open dropdown menu | Shows all valid options | | Text/String | Click to type | Supports multi-line for descriptions |

Undo/Redo

All changes in the Inspector are undoable with Ctrl/Cmd + Z and redoable with Ctrl/Cmd + Shift + Z. The engine maintains a full history of your edits, so experiment fearlessly!

Right-click a component header to access additional options:

Reset — Reset component to default values
Copy Component — Copy component data to clipboard
Paste Component Values — Paste copied component data
Remove Component — Delete the component from the entity
Move Up/Down — Change component order (affects execution order)
Toggle Enabled — Temporarily disable without removing

Assets Panel#

The Assets panel is a file browser for your project's resources. It supports folders, search, filtering, and drag-and-drop imports.

Importing Assets#

Import assets by dragging files from your computer into the Assets panel:

3D Models — .glb, .gltf (recommended), .fbx, .obj
Textures — .png, .jpg, .webp, .hdr (HDR for environments)
Audio — .mp3, .wav, .ogg
Scripts — .js, .ts (TypeScript compiled automatically)
Materials — .mat (exported from the engine)
Prefabs — .prefab (reusable entity templates)

The asset pipeline automatically optimizes imports:

Textures are compressed to GPU formats (BC7, ASTC, ETC2) based on platform
Models are optimized with meshoptimizer for faster loading
Audio is transcoded to appropriate formats for web playback
Scripts are bundled and minified for production builds

Asset Operations#

Right-click an asset to access context menu options:

Open — Open in default editor (scripts, materials)
Rename — Rename the asset
Duplicate — Create a copy
Delete — Move to trash (can be restored)
Show in Folder — Reveal in file system (local dev only)
Copy Path — Copy asset path for use in scripts
Properties — View asset metadata and import settings

Play Mode#

Test your game without leaving the Studio. Play Mode runs all systems (physics, scripts, AI, audio) in real-time.

| Action | Shortcut | Description | |--------|----------|-------------| | Play/Stop | Ctrl/Cmd + P | Toggle Play Mode on/off | | Pause | Ctrl/Cmd + Shift + P | Pause simulation (while playing) | | Step Frame | Ctrl/Cmd + . | Advance one frame (while paused) |

Play Mode Changes Are Not Saved

Any modifications made during Play Mode are not saved. The scene resets to its pre-play state when you stop. This is intentional — it lets you experiment without risk! If you make a change you like during Play Mode, remember to recreate it in Edit Mode.

Play Mode Features#

Maximize on Play — Automatically maximize viewport when entering Play Mode (toggle in settings)
Play from Camera — Start Play Mode from the current editor camera position
Stats Overlay — View FPS, frame time, entity count, and system performance
Console Output — See console.log output and errors in the Console panel

Essential Keyboard Shortcuts#

Master these shortcuts to work efficiently:

General#

| Action | Windows/Linux | macOS | |--------|---------------|--------| | Save Scene | Ctrl + S | Cmd + S | | Undo | Ctrl + Z | Cmd + Z | | Redo | Ctrl + Shift + Z | Cmd + Shift + Z | | Duplicate | Ctrl + D | Cmd + D | | Delete | Delete | Backspace | | Select All | Ctrl + A | Cmd + A | | Deselect All | Ctrl + Shift + A | Cmd + Shift + A | | Command Palette | Ctrl + Shift + P | Cmd + Shift + P | | Quick Search | Ctrl + K | Cmd + K |

Viewport#

| Action | Shortcut | Description | |--------|----------|-------------| | Move Tool | W | Translate selected objects | | Rotate Tool | E | Rotate selected objects | | Scale Tool | R | Scale selected objects | | Select Tool | Q | Select without transforming | | Focus Selected | F | Frame selected object in view | | Frame All | A | Frame all objects in scene | | Toggle Transform Space | T | Switch between World/Local space | | Toggle Snap | G | Enable/disable snapping | | Toggle Grid | Ctrl + ' | Show/hide ground grid |

Play Mode#

| Action | Windows/Linux | macOS | |--------|---------------|--------| | Play/Stop | Ctrl + P | Cmd + P | | Pause | Ctrl + Shift + P | Cmd + Shift + P | | Step Frame | Ctrl + . | Cmd + . |

View all shortcuts by opening Help → Keyboard Shortcuts or pressing ?.

Console and Debugging#

The Console panel displays runtime logs, warnings, and errors from your scripts and the engine.

Console Features#

Filter by Type — Show only logs, warnings, or errors
Search — Filter messages by text
Clear Console — Clear all messages
Stack Traces — Click error messages to see full stack traces
Copy Messages — Right-click to copy messages to clipboard

Use these methods in your scripts to log messages:

// In your script
export default (api) => {
  return (dt, time) => {
    // Log information
    console.log("Entity position:", api.position);

    // Log warnings
    console.warn("Low health detected!");

    // Log errors
    console.error("Failed to load asset!");

    // Log objects for inspection
    console.table({ x: api.position.x, y: api.position.y });
  };
};