3D Graph Viewer

The same checker-resolved graph that query_nodes answers from, rendered as a navigable 3D ontology. Pick a benchmark example, or load a graph from your own project. Every node is a declaration (class, interface, function, method, type, enum, variable); every edge is one of the three resolved relationships the compiler reported.

Drag to orbit, scroll to zoom, hover a node for its name, kind, and file.

Use it on your own project

Run the viewer locally:

npx @ttsc/graph view

view builds your project’s graph, reduces it, and opens this viewer in your browser from a local port. Nothing leaves your machine.

For the data as a file instead:

npx @ttsc/graph dump --tsconfig tsconfig.json > graph.json

dump prints the whole graph as JSON: every declaration and edge, keyed by absolute path. The viewer reduces it client-side (drops node_modules, keeps the highest-degree nodes, relativizes paths) so a large project stays legible. It also takes an already-reduced payload, so a graph you trimmed yourself loads as-is.

What the colors mean

Nodes are colored by declaration kind and sized by how many other declarations connect to them, so the load-bearing symbols stand out. Edges carry their kind:

• value-call: a runtime use (a call, a new T(), a JSX component, a tagged template).
• type-ref: a type-position reference (a parameter, return, property, or alias type).
• heritage: an extends or implements relationship.

Anything in node_modules or a .d.ts lib is dropped; it is not your code.