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 in a recursive split layout you can rearrange.
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 same runtime your exported game uses.
The workspace at a glance
The window has two regions:
- The Toolbar runs across the top: the Awaken brand, the File, Windows and Help menus, the project name, the transform tools, undo/redo, the playback controls, and on the right Store, the ? help toggle and the sign-in widget. 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 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%), above a full-width Assets/Console strip (the bottom 26%). Drag the dividers between regions to resize; drag a tab to rearrange (below). The Render, Store, Plugins, Simulation and Welcome panels are not in this default layout - they open on demand (see When a panel is shown).
On startup the Welcome page opens as the first tab of the view group, unless you have switched it off.
Panels
Sixteen panels ship with the editor:
| Panel | What it does |
|---|---|
| Editor (Scene view) | The scene view: a free fly/orbit camera, or the 2D view. Viewport |
| Game | Renders through the scene's active Camera; the play surface. Viewport |
| Screens | Lays out the game's UI screens on a stage at the game's aspect. In-Game UI |
| Hierarchy | The scene tree: selection, parenting, folders, filtering. Hierarchy |
| Inspector | Edit the selected object's components, or a selected asset. Inspector |
| Assets | Browse, import, create, and drag out every kind of asset. Asset Browser |
| Console | Editor messages, compile errors, GPU errors and script api.log output. Console |
| Code | The Monaco editor for scripts, libraries, modules and plugins. Code Panel |
| Shaders | Author WGSL-hook shaders, shader graphs and update graphs. Shader Editor |
| Anim Graph | Author animation state machines: states, transitions, parameters. Animation |
| Particles | Author particle effects: emission, shape, forces, gradient, size curve. Particle Editor |
| Simulation | Edit a Simulation asset's ordered list of GPU steps. Simulation Panel |
| Render | Lighting, shadows, image, performance and the scene's effect stack. Render Settings |
| Store | Browse and import packages from the asset store. Asset Store |
| Plugins | Manage installed editor plugins: enable/disable, permissions, uninstall. Plugins |
| Welcome | Templates, a getting-started checklist, recent projects and the devlog. Welcome |
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 editing and watching it play with one click.
The Anim Graph tab
The Anim Graph tab edits the animation state graphs an AnimStateMachine component runs: a list of graphs on the left (+ New Graph), a canvas of states and transitions with ⤢ Fit, and per-state clip, trim and transition settings. Its full description, with the graph model it edits, is on the Animation page.
When a panel is shown
Panels fall into three groups:
- Always shown - Editor, Game, Hierarchy, Inspector, Assets, and Console. They sit in the default layout at all times.
- Data-gated editors - Screens, Code, Shaders, Anim Graph, and Particles. Each is part of the default layout but only earns a visible tab once there is something for it to edit; until then it waits under the tab bar's
…overflow menu. - On demand - Render, Store, Plugins, Simulation and Welcome. These are not in the default layout. Open Render from File ▸ Render Settings…, Store from the Store button, Welcome from Help ▾, Simulation by opening a Simulation asset, or any panel from the Toolbar's Windows ▾ menu (which lists every panel and marks the ones already in your layout with a ✓). 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 the group it last lived in. The Game tab comes back by itself when you press Play.
What each gated tab waits for:
| Tab | Shown once the project has |
|---|---|
| Code | at least one script (of any kind) |
| Shaders | at least one shader, shader graph or update graph |
| Anim Graph | at least one animation graph |
| Particles | at least one particle effect |
| Screens | a UI element or screen in the open scene |
The test 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 it 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. Screens is the one exception: a screen is scene content with no asset to count, so it follows the open scene.
- 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 hidden. - The currently active tab is always shown, even when its list is empty, so a tab you just opened from
…cannot vanish while you use it. Switch to another tab and the empty one falls back into…. - This is a render-time filter only. Saved layouts are untouched; hiding and re-showing a tab never rewrites your dock.
On a new, empty project this means all five authoring tabs start under …. The discoverable way in is the Asset Browser, whose + New buttons create the first asset and bring the matching tab to the front.
The asset-editor sidebar
Code, Shaders, Anim Graph, Particles and Screens share one sidebar component (ListWorkspace), so the five panels behave the same way: a list of the items 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 (plus panel-specific items, such as a plugin's Add file) |
« / » in the sidebar header | Collapse to an icon strip / expand back |
| Footer create buttons | Create a new item and drop 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.
- Collapsed, each item is its glyph; hover one to see its name. The footer create buttons become one +, which offers a menu when the panel can create more than one kind (Code has five, Shaders three).
- The collapse state is per panel and remembered in this browser (
localStorage). - 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.
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 (a press that moves more than 6 px) 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 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 (380 × 320 px to start). Drag a floating window by its titlebar; drop it over a group to re-dock it there, or double-click its titlebar (or press ⤓) to send it back to the first group. A resize handle sits in its bottom-right corner.
- Collapse a group - the ⟨ button at the right of a tab bar shrinks that group to a 32 px icon rail, one glyph per tab, and hands its space to its neighbours. Click a glyph to expand the group on that tab, or » / « to expand it as it was. The root group has no ⟨, because it has no neighbour to give the space to.
- Empty groups disappear - drag a group's last tab out and the emptied group goes; its parent split un-nests, 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 group 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. A panel that has never been shown costs nothing until you first open it.
Layout persistence
Your layout is saved to the browser's localStorage (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 layout, and loading a project never changes yours. A corrupt or outdated saved layout is repaired on load; if nothing usable is left 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 changing which tab you had active. Whether it then shows as a tab or under … follows the data gate 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 "⚠ This panel hit an error" card showing the message - the rest of the editor keeps running. Click Reload panel to remount just that panel.
See also
- Toolbar & Menus - the always-on top bar
- Viewport - the Editor and Game views
- Project & Editor Settings - project-wide and per-machine settings
- Keyboard Shortcuts - the complete key reference
- Core Concepts - scenes, GameObjects, and the runtime