Web Engine Docs
Preparing documentation
Documentation0%
Use the search bar to quickly find any topic
Content
Search
Examples
Ready
Web Engine v0.1.0-alpha
Edit this page on GitHub
Last updated: 1/16/2026
Was this page helpful?
Preparing documentation
Use the search bar to quickly find any topic
The Web Engine Studio editor provides a flexible, customizable workspace built on Dockview, allowing you to arrange panels according to your workflow. The interface follows modern game engine conventions with a central 3D viewport surrounded by contextual panels.
The editor uses a powerful docking system that lets you drag, resize, split, and reorganize panels. All panel layouts are automatically saved and restored between sessions.
View and organize your scene's entity tree with parent-child relationships
3D view for editing and manipulating objects with real-time rendering
Edit properties and components of selected entities and assets
Browse, import, and manage project assets with folder navigation
The default layout provides a balanced workspace optimized for general game development:
Web Engine Studio includes several pre-configured layouts optimized for different workflows. Access them from Window → Layouts in the menu bar.
Standard layout with hierarchy, viewport, assets, and inspector. Ideal for general game development and level design.
Optimized for writing and debugging scripts with the Script Editor panel prominently placed alongside the Scene view and Script Errors panel.
Maximizes viewport space for level design and visual work. Minimizes side panels to focus on the 3D view.
Minimal layout with just Scene viewport and Inspector. Perfect for laptops or focused editing sessions.
Side-by-side Scene and Game views with Console, Profiler, and debug panels for runtime testing and performance analysis.
Click and drag a panel's tab to reposition it. Drop zones appear as you drag:
Hover over panel borders until the resize cursor appears, then click and drag to adjust size. The layout engine maintains proportions automatically.
Right-click a panel tab to access panel-specific actions:
Access panels from the Window menu or keyboard shortcuts:
| Panel | Shortcut | Menu Location |
|-------|----------|---------------|
| Hierarchy | Cmd/Ctrl + 1 | Window → Hierarchy |
| Inspector | Cmd/Ctrl + 2 | Window → Inspector |
| Asset Browser | Cmd/Ctrl + 3 | Window → Project |
| Console | Cmd/Ctrl + 4 | Window → Console |
Your layout is automatically saved as you work. Changes persist between sessions, so your workspace is always ready.
Window → Save Layout → Enter Layout Name
Save custom layouts with descriptive names for quick access later.
Window → Layouts → [Select Layout]
Share layouts with your team or back up custom configurations:
If your layout becomes disorganized, reset to factory defaults:
Window → Reset Layout
Warning
This action cannot be undone. Export your current layout first if you want to keep it.
Double-click a panel tab or right-click → Maximize to expand a panel to full screen. Press Escape or double-click again to restore.
Web Engine Studio supports system-aware dark mode. The interface automatically switches based on your operating system preferences. You can also manually toggle:
Settings → Appearance → Theme
Panels use subtle transparency and backdrop blur effects on supported browsers for a modern, polished look without sacrificing readability.
Tip
Close unused panels: Each panel consumes resources. Close panels you're not actively using to improve performance.
Tip
Use tabs efficiently: Group related panels as tabs (e.g., Assets and Console) to save screen space and reduce visual clutter.
Tip
Multi-monitor setup: On multi-monitor setups, you can drag panels to separate browser windows for an extended workspace.