#3D Code Graph

3D Code Graph reveals entry points, modules, components, tests, and configuration relationships in a large codebase. It combines spatial exploration, search, neighbourhood highlighting, and property inspection while keeping an operable list fallback.

npm install @a3s-lab/ui@0.4.0

<section class="code-graph" data-state="loading" data-view="graph">
<div data-code-graph-viewport tabindex="0"><canvas data-code-graph-canvas></canvas></div>
<ul data-code-graph-list hidden></ul>
</section>
<script type="module">
import "@a3s-lab/ui";
import "@a3s-lab/ui/code-graph";
const graph = document.querySelector(".code-graph");
graph.setData(await loadDependencyGraph());
graph.setState("ready", { message: "Graph updated" });
</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Why a graph

A file tree answers where a file lives. A graph answers what a change may affect. The projection prioritizes entry points, high-degree nodes, and direct neighbours of the selection. Above 600 nodes or 4,000 edges it enters partial, preserves complete totals in status, and keeps search and list access available.

#Interaction and fallback

Drag to orbit, scroll or use plus and minus to zoom, use arrow keys to rotate, and press Home to reset. Selection sends a cancelable a3s:code-graph-before-selection-change followed by a3s:code-graph-selection-change. If Canvas is unavailable, the component switches to the button-based list. Accessibility never depends on Canvas hit targets.