Skip to content

Launching the Editor

Awaken is a single-page app with two routes - a light marketing landing page and the heavy editor - and this page walks you from the landing page into your first oriented workspace.

Landing page vs the /editor route

Awaken is one React single-page application, split into two routes on purpose:

  • / - the landing page. It is lightweight and loads eagerly: the pitch, the import support matrix, and a Launch Editor button. None of the WebGPU or editor code downloads here.
  • /editor - the editor. Visiting it (or clicking Launch Editor) lazy-loads the heavy bundle: the WebGPU renderer, every panel, the import pipeline, and the scripting compiler. This is why the landing page stays instant - you only pay for the editor when you actually open it.

The route match is exact: only /editor (or paths under /editor/) load the editor; anything else - including lookalikes like /editorial - falls through to the landing page.

📸 Screenshot - save as img/guide-landing.png

The Awaken landing page at / - the hero with the "Build games in your browser" headline and the Launch Editor button.

If you are running Awaken from source, the editor dev server is at http://localhost:5180/ (pnpm dev); the same two routes apply.

First load

The first time you open /editor, the browser downloads the editor chunk (a brief "Loading editor…" flash), then Awaken initialises WebGPU. If your browser can't provide a GPU adapter, you'll see the WebGPU-unsupported message instead - see Requirements & Browser Support.

On a machine with more than one GPU, a GPU picker may appear here so you can choose integrated vs discrete.

The default seeded scene

A fresh project is never an empty void. Awaken seeds a small default scene so you can see, light, and orbit something immediately (seedDefaultScene):

ObjectWhat it is
GroundA wide, flat grey slab (a scaled cube) so objects have a floor and the scene has a sense of scale.
SunA directional light angled down, tinted warm - so everything is lit out of the box.
Main CameraA perspective camera (60° field of view) placed back and slightly up, so Game view works immediately.

These are ordinary GameObjects with ordinary components - select any of them in the Hierarchy and edit them in the Inspector, or delete them entirely. A brand-new project ships no starter gameplay content; reusable pieces like a first-person player are importable from the starter content via Assets → Import when you want them.

📸 Screenshot - save as img/guide-first-load.png

The editor on first load: the seeded scene (Ground slab, Sun, Main Camera) in the Viewport, the Hierarchy listing those three objects, and an empty Inspector.

The "reopen last project" prompt

If you've saved a project before (in a Chromium browser, where in-place save works), Awaken remembers the folder handle. On your next visit to /editor, before it seeds a default scene, it asks:

Reopen last project "…"? - Reopen / Cancel

  • Reopen restores your saved project - scenes, meshes, textures, prefabs, and scripts - exactly where you left off.
  • Cancel leaves you in a fresh default scene.

This uses the browser's File System Access API, so it only appears where that API exists (see Requirements). Saving is explicit - Ctrl/⌘+S or File ▸ Save Project - because Awaken deliberately does not auto-save (auto-save would rewrite every mesh and texture on a timer). More in Saving & Opening Projects.

First orientation of the workspace

The editor is a set of dockable, draggable tabs around a central viewport. Out of the box you'll see:

Along the top sits the Toolbar: the File ▾ menu (new/open/save, import, preview, export) and the ▶ Play / ⏸ Pause / ■ Stop playback controls. See Toolbar & Menus and Interface & Workspace for the full layout, and drag any tab to rearrange the panels to taste.

Ready to actually do something? Take the Five-Minute Tour.

See also

Awaken — browser-native WebGPU game engine.