Repo Graph Viewer

Repo Graph Viewer turns a codebase into a picture you can explore. It reads the graph.json that graphify produces for a repo, where every function, class, and file is a node and every call or import is a link, and draws it as a live force-directed graph in the browser. Related code pulls together into clusters and each cluster gets its own color, so the shape of a project is visible at a glance.

The frame above is the real app running on this portfolio's own code. Pick another example from the header, or drop any graph.json onto it.

What you can do

• Switch between 2D and 3D. The flat view is for reading structure; the 3D view shows the overall shape. Press G to toggle.
• Follow the connections. Hover a node to light up everything it touches. Click it for details, then click any neighbor to step through the code one hop at a time.
• Search. Type a name and the matching nodes and their neighbors light up.
• Bring your own repo. Run graphify on any project and drop the result on the page. Five example graphs from my own repos are built in.

How it is built

A Next.js app with no backend. The whole thing is static files hosted on Cloudflare, and the graph itself is drawn by react-force-graph (d3-force for the layout, Three.js for 3D). It works on phones too: the detail panel becomes a bottom sheet, and tapping a node pans it into view.

Decisions worth knowing

• It survives format changes. graphify is under active development and its output keeps shifting. The loader reads every field with a fallback, and a test covers each variation I have hit, so a new format breaks a test instead of the page.
• 3D only loads when you ask for it. Three.js is the heaviest dependency, so it stays out of the download until someone switches to 3D.
• No theme flash. Light or dark is applied before the first paint. The page can also be told which theme to use through the URL, which is how it is embedded here in dark to match the rest of the site.