Code Backrooms

Walk through a codebase as a Backrooms level. Files are areas, functions are rooms, an if forks into two lanes, a loop is a ring you can walk around, and every call is a door.

▶ Try it in the browser · Walk this repository

Paste the URL of any public JavaScript or TypeScript repository on GitHub, or walk a local folder. The code is parsed in your browser tab, and a folder is never uploaded. Once a repository is open, the address bar is its share link, for example ?repo=valuecodes/code-backrooms.

A GitHub repository comes through this site's Cloudflare Worker as one zip download from GitHub, after a Cloudflare Turnstile check that keeps bots from using it as a proxy.

What you are walking through

Code	Space
Repository	The world, starting in an entrance hall
Workspace package	A zone
File	An area: a hub room with doors to its functions
Function	A column of rooms, one per run of statements
if / else	A fork room, a green lane and a red lane, a merge room
switch	One lane per case, in source order
Loop	A ring: body, a "repeat" door back to the head, an exit
Call	A door to the callee, or a portal if it already has one
return	A portal back to where you came from
break / continue	A jump portal to the loop's end or head

The layout is built from the code, so the same code always gives the same world. The world shows what can run, not a trace of what did run.

Press E: every room shows the code it came from.	Press Tab: this repository as a world of 152 areas.

Controls

Key	Action
WASD / arrows	Move, Shift to sprint
Mouse	Look (click the scene to lock it)
E	Show the current room's source code
Tab	Map of the whole world
M	Hide the map of the rooms you walked
1–9	Pick a callee at a violet choice portal
Backspace	Back to where this function was entered
R	Back to the entrance
I	Renderer stats (draws, triangles, …)
Esc	Release the mouse

Run it locally

Needs Node.js 24 and pnpm 12.

pnpm install
pnpm dev

Then open http://localhost:3000.

pnpm install also turns on the git hooks: format, lint and a staged secrets scan before each commit; typecheck, tests and Knip before each push. Committing needs gitleaks v8.19+ on PATH for the staged secrets scan: brew install gitleaks (macOS, Linux and WSL), or unpack the linux_x64 tarball from the releases page into a directory on PATH such as ~/.local/bin.

How it works

Parsing and building run in the browser tab. Code decides which rooms and doors exist. A seed taken from a hash of the source decides only sizes and placement, so the same code always gives the same world.

flowchart TD
  subgraph load["Load: apps/web"]
    A["GitHub repository, folder,<br/>or bundled example"] --> B["Source filter<br/>JS/TS files and manifests,<br/>size and count caps"]
  end

  subgraph analyse["Analyse: Web Worker for a repository or folder"]
    B --> C["@repo/parser<br/>Babel AST per file"]
    C --> D["CodeGraph<br/>modules, functions, calls,<br/>control-flow trees, imports"]
  end

  subgraph build["Build: one area per file, generated on approach"]
    D --> E["@repo/code-graph<br/>spatial grammar"]
    E --> F["WorldGraph<br/>hubs, flow rooms, lanes,<br/>doors, portals"]
    F --> G["@repo/world-generator<br/>seeded layout"]
    G --> H["BuiltWorld<br/>walls, door frames,<br/>colliders, portal triggers"]
  end

  subgraph play["Walk: React Three Fiber"]
    H --> I["@repo/renderer<br/>merged meshes per room,<br/>light pool, player"]
    I --> J["HUD, source panel,<br/>maps, call stack"]
    J -. "heading for a portal<br/>to an unbuilt area" .-> E
  end

Loading

Package	Job
packages/parser	Babel parses JS and TS into functions, calls and flow trees
packages/code-graph	Turns code into rooms, doors and portals
packages/world-generator	Places rooms from a seed and builds walls and colliders
packages/renderer	Draws the world with React Three Fiber
apps/web	Loading, HUD, source panel and maps

Each file is generated as its own area when you first head for it, so large repositories open quickly. Contributor notes live in AGENTS.md.

Commands

pnpm lint           # type-aware linting, whole repo in one oxlint process
pnpm knip           # unused files, exports and dependencies
pnpm typecheck      # TypeScript 7 (tsc) across the repo
pnpm test           # test suite
pnpm build          # production builds
pnpm format         # oxfmt write
pnpm format:check   # oxfmt check (CI gate)

oxlint prints nothing when there are no findings, so silent output means clean.

CI runs typecheck, lint, knip, format:check, test, build and a gitleaks secret scan on PRs and on push to main, plus CodeQL code scanning and actionlint + zizmor over the workflow files. The checks live once in checks.yml, called by feature.yml (PRs) and main.yml (push to main). The all-passed job fans them in: require only that check in branch protection.

The repository settings this CI expects:

1. Rules → Rulesets: the ruleset for main requires a pull request and the all-passed status check, which fans in every CI job.
2. Code security → Code scanning: default setup is off. CodeQL runs from checks.yml, and GitHub rejects its uploads while default setup is on.
3. Code security → Dependabot: alerts on, security updates off. .github/dependabot.yml only bumps the SHA-pinned GitHub Actions monthly; npm dependencies are updated by hand.
4. Issues: the Maintain-kit dashboard workflow keeps one pinned issue listing the updates that are due. Run it once by hand (Actions → Maintain-kit dashboard → Run workflow) to create it.

Limits

• JavaScript and TypeScript only.
• Up to 400 source files and 8 MB per repository.
• Calls through objects (obj.method()) and callbacks show as closed doors.
• GitHub URLs load public repositories only, and branch names containing / are not supported.

License

MIT