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.

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.

Viewport Navigation#

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

Camera Controls#

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.

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#

Context Menu#

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#

1. Click the Add Component button at the bottom of the Inspector
2. Search for a component by name (e.g., "RigidBody", "Light", "Script")
3. Browse categories: Physics, Rendering, Audio, AI, Scripting, Effects
4. 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:

Component Context Menu#

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.

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#

Viewport#

Play Mode#

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 });
  };
};

Customizing Your Workspace#

The Studio layout is fully customizable. Save and load layout presets to optimize for different tasks.

Layout Presets#

• Default — Balanced layout for general game development
• Modeling — Large viewport with minimized panels for 3D work
• Scripting — Script editor side-by-side with scene view
• Level Design — Hierarchy and Assets emphasized for scene building

Save your own layouts via Window → Save Layout. Layouts are stored in browser local storage and persist across sessions.

Next Steps#

Now that you know the editor interface, dive deeper into specific areas: