Code Explorer got an upgrade

A few days ago I shipped three separate prototype pages for visualizing TypeScript. They worked, but they were rough: grid layouts, plain textareas, no interactivity. Since then, the whole thing got rebuilt into a single app with real diagrams you can actually use.

Type Map: interfaces, classes, enums, and how they connect. Click any node to highlight its neighbors.

What's new

One app, three views. Type Map, Call Graph, and Module Graph live behind tabs. Each view has its own sample code and editor content. No more navigating between separate pages.

Real graph layout. Replaced the naive grid with a simplified Sugiyama algorithm. Parent types sit above children, callers above callees, importers above imported modules. Edges route cleanly between layers instead of crossing everything.

Call Graph: functions and who calls whom, laid out top-down from entry points.

Interactive diagrams. Click a node to highlight it and its direct neighbors. Everything else dims. Pan, zoom, fullscreen. Export as SVG.

Multi-file analysis. Define multiple files with // --- path/to/file.ts --- separators and get cross-file relationships: a type in service.ts extending an interface from types.ts shows up as a real edge. Two-pass analysis collects all names first, then resolves references across files.

CodeMirror editor. Syntax highlighting, line numbers, bracket matching, undo/redo. The textarea is gone.

Shareable URLs. Every edit compresses the code into the URL hash. Copy the URL, send it to someone. They see exactly what you see. No server, no database.

Try it

The sample code loads automatically. Edit it, switch views, click around. 118 tests, all passing.