Hot-reload your code in the browser

tutorial lesson Intermediate ⏱ 5 min vgai 0.1.0

Prerequisites: Foundations — components in action

What you'll learn

• Edit game code and see it hot-swap into the running game
• Understand in-browser transpile (esbuild-wasm) + hotSwap
• Know that this needs no server and no page reload

What you'll build: A live in-browser hot-reload — edit a component, Run, the game updates instantly.

Walkthrough — Hot-reload your code in the browser · generated by site/media/lessons/playground-hmr.lesson.ts (4 steps)

vgai can hot-reload your game code entirely in the browser — no Node, no Vite round-trip. The Code Playground edits a GameComponent’s source, transpiles it with esbuild-wasm client-side, and hot-swaps the class on the live runtime.

Steps

1. Open the Code Playground. A starter GameComponent is already running in the real engine (a cube that spins and shifts color).

   

   A GameComponent running live in the browser.

2. Edit the component’s code. Change update(dt) — here: spin faster, scale up, paint it green.

   

   Edit the source right in the browser.

3. Press Run — it transpiles in-browser and swaps the live game. browser-transpile.ts runs esbuild-wasm to compile your TS to a module and rewires its three / @engine imports to the live singletons; the playground then re-attaches your component to the running cube (the editor’s play-mode uses the same path to hotSwap classes in place — see the note below).

   

   esbuild-wasm transpile + hotSwap — on the live game.

4. Your change runs instantly. The cube is now green and larger — no server, no page reload.

   

   Edit → Run → live update, fully client-side.

Why this works without a server

The load-bearing trick (browser-transpile.ts): transpiled user code imports the same running three / GameComponent singletons (via registerRuntimeModules), so a hot-swapped class shares prototypes and instanceof with the live runtime. The same path powers the editor’s live component HMR (play-mode.ts). Persistence is the browser’s storage — see the storage backends.

Recap

New functionality

• Edited a GameComponent in the browser
• Hot-swapped it into the running game with no reload

New concepts & skills

• esbuild-wasm transpiles your TS in the browser (no server)
• transpiled code shares the running three/engine singletons, so hotSwap preserves instanceof
• the same in-browser HMR powers the editor and the playground

Next lesson → SDK & storage backends

See also

• Code Playground · Components in action