EN Studio Overview

The local Studio: overview and launch

Français · Type: tutorial + how-to · Audience: author · Context: local Studio · Status: ready · Applies from: 4.2.3

The local Studio · contract: stable · verified by CI (support matrix of 4.4.0, 2026-10-23): Chromium end to end (the Studio's checks); Windows: the unit suite only · automated checks: jobs e2e, windows; CI plan e2e, windows; 2 test files · people's passes: studio-hero-matrix not run (#238) · known limits: one-person, lan-engine-repo

The Studio is a page of the dev server where you edit a game with the real engine in front of you: what you see is what players get. This page starts it, on your computer or on your phone, and tours its tabs.

What the Studio is

npm run studio starts the dev server and opens the Studio at http://localhost:5173/__studio/. Nothing leaves your machine: every change is written to files under games/<id>/ (in a created project, under game/), the same files an AI assistant or a teammate edits with git. The room you edit is drawn by the engine itself (src/engine/dom), so a change shows as the game will show it.

The Studio is one page, studio.html (entry src/studio/main.ts). Any dev server of the repository serves it at /__studio/, npm run dev too; npm run studio also opens it in your browser. A production build leaves it out, unless it is built on purpose as a static demo (Demo mode).

To put a game's Studio online for a team (logins, roles, several people at once), use the hosted Studio instead: What runs where.

Limit · one-person The local Studio is for one person on one machine. It has no accounts, no roles and no locks: two people editing the same files at once go through git, not through the Studio.

What you will get

The Studio open on the demo game (or yours), the Rooms tab showing a room with its placement editor, and, if you want, the same Studio on your phone over your local network.

What you need

• Node 22.12 or later, and the repository installed with npm install (Install from the repository), or a created project (Your first game).
• The prepared assets of the game (npm run assets), so rooms are drawn with their pictures.
• For screenshots and before/after captures only: Playwright and its Chromium (doctor).

Steps

1. Start the Studio.

   # in the engine repository
   npm run studio

   # or in a created project
   npm run studio

   In the engine repository the game is GAME=<id> when you set it, otherwise the last game chosen with npm run game, otherwise config.game of package.json, otherwise demo. A game folder without index.ts stops the start with ✖ games/<id>/index.ts not found (GAME=<id>). Your browser opens /__studio/ on the Rooms tab.

2. Pick a room in the Rooms tab. The room is drawn by the engine, with the placement editor on top, and the list of its props, actors and hotspots on the right. Select one to open its sheet (Edit a room).

3. To work from a phone or a tablet on the same network, stop the Studio and start it in LAN mode instead.

   # in the engine repository
   npm run studio:lan

   The command prints a one-session token and the Studio address with it:

   LAN write access is protected by this one-session token:
     <token>
   Studio: http://<this machine's address>:5173/__studio/?token=<token>
   Layout editor: http://<this machine's address>:5173/?edit=<room>&token=<token>
   

   Open that address on the phone. A new token is drawn at each start, unless you set WEB_SCUMM_STUDIO_TOKEN yourself. Why the token, and what it protects: Local and LAN security.

Limit · lan-engine-repo npm run studio:lan and npm run dev:lan are scripts of the engine repository. A created project has no LAN script yet; Testing on a phone over the LAN says how to do without.

The tabs

The tabs, in the order of the bar. The URL keeps the tab (#check, or #rooms/<room> for a room), so a reload lands where you were.

Tab	What it does	Page
Rooms (default)	The room drawn by the engine with the placement editor on top; sheets for props, actors and hotspots: look lines, reactions, talk topics, the timeline of scripts; forms for structured values and the stage	Edit a room, Placement and stage
Storyboard	The editor of storyboard.json, each panel drawn like a frame, with its coverage against the content	Storyboard
Map	The scenario's groupings (chapters, puzzles, characters) and what no grouping names yet	Map
Assets	Every image and sound, where it is used, its art prompt, uploads and the cutting of sheets	Assets and cutting
Voices	The voice recording table per language, and the heroes × languages matrix	Voices and the heroes × languages matrix
Music	The game's scores through its own music director	Music
Check	Validator, solver, world map, puzzle graph, lint, playtests, storyboard coverage, changes between revisions	Check, Semantic diff, Before and after captures
Play	The game in a frame with its live state, the rule explainer, the journal, sessions to export and replay	Play and replay a session, Rule explainer
Language	The objectives with their forms, and the game's IR	Language and objectives
Remix	Seeds, dimensions, worlds compared, coverage and bias	Remix in the Studio
Notes	The shared log with the AI and your teammates	Notes

Beside the tabs: Undo and Redo in the header (Ctrl/Cmd+Z, Shift for redo) over every write of the session (Preview, apply, undo), and the Assistant button (or the a key when no field has focus), a chat with a model of your choice that has the same tools as the MCP server (The Assistant).

The Studio follows the files: when an AI, an editor or git changes a file of the game, the Studio reloads what it touches and keeps what you are typing. Vite's full reloads caused by game files are ignored by the Studio page (the engine view reloads).

What you learned

• npm run studio opens the Studio; npm run studio:lan opens it to your network behind a token (Local and LAN security).
• Every edit is a file of the game, written atomically and undoable (Preview, apply, undo).
• Any AI can work on the same files beside you (Local MCP: setting up each client).

Where to go next

• Edit a room, then Check.
• Studio troubleshooting when the Studio refuses something.

---

Edit the source of this page · Report an error