A real React game, ingested unmodified

cli tutorial Advanced ⏱ 3 min vgai 0.1.0

Prerequisites: Ingest an unmodified three.js game

What you'll learn

• Know what "native-React game ingestion" is (and is not), and how to open react-rpg in the editor
• See the byte-for-byte "zero source diff" proof against the upstream commit

What you'll build: A terminal look at the vendored real React game, its unaltered-source verification, and how to run it live.

The ingest adapter family has a third member beside the three.js and PixiJS routes: native-React DOM games — games whose UI is React components, with no canvas renderer at all. There is nothing to trap or capture; instead the unmodified game’s component tree mounts as a DOM layer in the host stack, its React import deduped onto the editor’s own React 19. The proven game is react-rpg.com (MIT): menu, character creation, and dungeon crawling all run live inside the editor.

A real React game, ingested unmodified

# transcript pending capture — run: node site/media/capture-cli.mjs

Terminal — A real React game, ingested unmodified · captured by site/media/capture-cli.mjs

Steps

1. The vendored game. vendor/react-games/react-rpg/ holds the complete upstream tree — 620 tracked files including every sprite/tile PNG and audio file — pinned to one upstream commit by react-rpg.UPSTREAM.lock (repo, commit, license, and a per-file sha256 manifest).

2. Prove zero source diff. node vendor/react-games/verify-unaltered.mjs checks every tracked file byte-for-byte against the manifest. The same check runs in CI on every PR — a one-byte edit to the vendored game turns the build red.

3. Run it yourself. No build step: the game’s dependencies are installed at the repo root and its source is tracked, so it mounts straight through the dev server:

   npm run dev   # then open http://localhost:5173/packages/editor/editor.html?ingest=react-rpg

   The game mounts through its manifest (packages/editor/src/ingest/games-react/react-rpg/), whose host shim replicates the page environment the game expects — the editor plays it in the Game tab while the editor’s own panels keep working.

Embed-only, by design

A react ingest is hosted, sized, and disposed — not authored. There is no scene graph to inspect, and the editor never writes JSX back into an unmodified game (that ban is test-enforced). This differs from the three.js/PixiJS ingest routes, where captured scene edits persist to an overlay. Scope is native-DOM React only: R3F or @pixi/react games are canvas games and ride the three.js/PixiJS ingest routes instead.

Recap

New functionality

• Read the upstream pin for the vendored react-rpg
• Ran the byte-for-byte unaltered-source verification
• Opened a real React game in the editor with ?ingest=react-rpg

New concepts & skills

• native-React DOM games mount unmodified as a DOM layer, deduped onto the host React 19
• there is no renderer to capture — and no authoring: react ingests are embed-only by design
• the vendored tree is checked byte-for-byte against its upstream commit in CI, on every PR
• R3F/@pixi/react games are canvas games — they use the three.js/PixiJS routes

Next lesson → Real PixiJS games, ingested unmodified

See also

• Loading Existing Games · Real PixiJS games, ingested unmodified
• Ingest an unmodified three.js game