Interface & Workspace
The Awaken editor is a single browser tab split into dockable panels - a viewport, a scene tree, an inspector, an asset browser, and more - arranged around a recursive split layout you can rearrange at will.
Everything you do - importing a pack, placing objects, wiring scripts, tuning the render pipeline, and pressing Play - happens inside this one window. There is no separate "game window": the Game tab runs the exact same runtime your exported game will use, so what you test is what your players get.
The workspace at a glance
The window has two fixed regions and one flexible one:
- The Toolbar runs across the top: the Awaken brand, the File menu, the project name, the transform tools, undo/redo, and the playback controls. It is always visible. See Toolbar & Menus.
- The dock fills the rest of the window. It is a tree of split regions, each holding a group of tabbed panels. Every panel - including the viewports - is just a draggable tab.
The default arrangement is a top row of three columns over a full-width bottom strip:
The top row is Hierarchy (18%) · the view group (62%) · Inspector (20%), sitting above a full-width Assets/Console strip (bottom 26%). Drag the dividers between regions to resize; drag a tab to rearrange (below). The Render, Store, and Plugins panels are not in this default layout - they open on demand (see When a panel is shown).
📸 Screenshot - save as img/editor-full-window.png
The whole editor at the default layout: a scene loaded with a few objects, Hierarchy on the left, the Editor viewport centre with a cube selected and the translate gizmo showing, Inspector on the right, and the Assets browser along the bottom.
Panels
Thirteen panels ship with the editor:
| Panel | What it does |
|---|---|
| Editor (Viewport) | The 3D scene view - a free fly/orbit camera. Viewport |
| Game (Viewport) | Renders through the scene's active Camera; the play surface. Viewport |
| Hierarchy | The scene tree - selection, parenting, filtering. Hierarchy |
| Inspector | Edit the selected object's components, or a selected asset. Inspector |
| Assets | Browse, import, create, and drag out meshes, textures, materials, prefabs, scripts, effects. Asset Browser |
| Console | Editor messages and script api.log output. Console |
| Code | The Monaco TypeScript editor for scripts. Code Panel |
| Shaders | Author hook-based (WGSL) and node-graph shaders. Shader Editor |
| Anim Graph | Author animation state machines - states, transitions, parameters. Animation |
| Particles | Author particle effects - emission, shape, gradient, curves. Particle Editor |
| Render | Global render/physics/post settings. Render Settings |
| Store | Browse and import packages from the asset store. Asset Store |
| Plugins | Manage installed editor plugins - enable/disable, permissions, uninstall. Plugins |
Both the Editor and Game tabs are the same viewport component in two modes - Editor uses a free camera, Game renders through your scene's Camera. By default they share a tab group in the centre column, so you switch between "edit" and "watch it play" with one click.
When a panel is shown
Panels fall into three groups:
- Always shown - Editor, Game, Hierarchy, Inspector, Assets, and Console. They are always relevant, so they sit in the default layout at all times.
- Data-gated editors - Code, Shaders, Anim Graph, and Particles. Each is part of the default layout but only earns a visible tab once the project actually contains that kind of asset; until then it waits under the tab bar's
…overflow menu. Create a shader and the Shaders tab appears immediately. - On demand - Render, Store, and Plugins. These are not in the default layout at all. Open Render from File ▸ Render Settings, Store from the Store button, Plugins from Windows ▾, or any panel from the Toolbar's Windows ▾ menu (which lists every panel, and marks the ones already open with a check). Opening one docks it into your layout.
Every tab except Editor has a close ✕. Closing a panel prunes its tab; re-open it from Windows ▾ and it returns to whichever group it last lived in. The Game tab is the one exception that re-opens itself: pressing Play brings it back if you closed it.
The data-gate is asset existence in the project, not usage in the open scene. Create a shader and the Shaders tab appears immediately, even before you assign the shader to anything - the tab you are working in must not vanish while your new asset is still unattached. Existence is also the signal that survives switching scenes, where "used by something in the world" would flicker.
- A gated tab that fails the test is not removed from your layout - it moves into a right-aligned
…button on that tab group's bar. Click…and pick it to bring it forward. - The
…button only appears when something on that bar is actually hidden. A bar with nothing to hide has no…. - The currently active tab is always shown, even when its asset list is empty - so a tab you just opened from
…can't vanish under you while you use it. Switch to another tab and the empty one falls back into…. - This is a render-time filter only. Saved layouts (and the tabs' positions in them) are untouched - hiding and re-showing a tab never rewrites your dock.
On a brand-new, empty project this means all four authoring tabs start under …. The discoverable way in is the Asset Browser, whose + New Script / + New Shader / + New Graph / + New Effect buttons create the first asset and bring the matching tab to the front.
The asset-editor sidebar
Code, Shaders, Anim Graph and Particles all share one sidebar component, so the four panels behave identically: a list of the assets of that kind on the left, and the open item's editor filling the rest of the panel.
| Gesture | What it does |
|---|---|
| Click an item | Opens it in the main area |
| Double-click an item | Rename |
| Right-click an item | Context menu - Rename / Delete (delete confirms first) |
« / » in the sidebar header | Collapse to an icon strip / expand back |
| Footer create button | Creates a new asset and drops straight into naming it |
- Renaming is an inline field when the sidebar is expanded (Enter or clicking away commits, Esc discards) and a small dialog when it is collapsed - there is no room for the field in the icon strip.
- Collapsed, each item is just its glyph; hover one to see its name in a tooltip. The footer create button becomes a +, which offers a menu when the panel has more than one kind to create (the Code panel has three: game, editor, and plugin scripts).
- The collapse state is per panel and persisted in
localStorage, so a panel you keep narrow stays narrow across reloads. - Creating from the footer button hands the new item straight to the rename field, so you name it once instead of living with
material3. - Names are display-only: every asset has a stable id that components and prefabs reference, so renaming never breaks anything pointing at it.
See Code Panel, Shader Editor and Particle Editor for what each panel's main area holds.
📸 Screenshot - save as img/editor-list-sidebar.png
A side-by-side of the shared sidebar: the Code panel expanded with three scripts (one badged "editor"), and the Particles panel collapsed to its icon strip with a hover tooltip showing an effect name.
The docking system
The dock is a recursive split tree, like VS Code or Blender. A split node arranges its children in a row (side by side) or a column (stacked); a leaf node is a tab group holding one or more panels. Every panel is a tab you can pick up and move.
Drag a tab by its label and drop it to rearrange:
- Split - drop within ~28% of a group's left/right/top/bottom edge and the group splits, with the dropped panel taking that side. A blue drop indicator shows where it will land.
- Add as a tab - drop onto a group's tab bar (or its centre) to join that group.
- Float - drop anywhere off all groups (for example on the toolbar) and the panel becomes a free-floating window. Drag a floating window by its titlebar; drop it back over a group to re-dock, or double-click its titlebar (or the ⤓ button) to send it back to the first group. A resize handle sits in its bottom-right corner.
- Collapse - drag a group's last remaining tab out and the emptied group disappears; its parent split un-nests automatically, so repeated rearranging never leaves dead space.
Resize any split by dragging the 6-pixel splitter between two children; a child cannot shrink below 6% of its split.
Panels never lose their GPU device
Panel content is rendered once and portaled into whichever leaf currently hosts it. Moving a tab or splitting a group re-parents the panel's DOM without unmounting it - so dragging the Editor viewport to a new spot never tears down and rebuilds its WebGPU device. Panels that have never been opened cost nothing until you first show them.
Layout persistence
Your layout is saved to the browser's localStorage (under the key awaken.dock.v6) and restored on reload. It is per-machine, not part of the project - opening the same project on another computer uses that machine's saved layout, and sharing a project file does not carry your window arrangement. Corrupt or outdated saved layouts are repaired automatically; if all else fails the editor falls back to the default arrangement.
A panel introduced by a newer build is missing from every previously-saved layout, so on first run it is added to the main workspace group - the one holding Editor/Game - without disturbing whichever tab you had active. That is how an existing layout picks up a new tab such as Particles. Whether it then shows as a tab or under … follows the data gate described above.
When a panel crashes
Each panel is wrapped in a PanelErrorBoundary. If a panel throws while rendering, only that panel is replaced with a recoverable "Reload panel" card - the rest of the editor keeps running. Click the card to remount just that panel.
See also
- Toolbar & Menus - the always-on top bar
- Viewport - the Editor and Game views
- Keyboard Shortcuts - the complete key reference
- Launching the Editor - opening Awaken for the first time
- Core Concepts - scenes, GameObjects, and the runtime