Paste TypeScript, see diagrams

I wanted to see the shape of TypeScript code without installing anything. Paste interfaces, get a type map. Paste functions, get a call graph. Code Explorer does exactly that, entirely in your browser.

Type Map: interfaces (purple), types (cyan), classes (pink), enums (orange), with extends/implements/references arrows

Three views, one trick

The TypeScript compiler API is available as a single JavaScript file from a CDN. Load it, call ts.createSourceFile(), and you have a full AST with type information. No server needed, no install, no bundling a 3.6 MB compiler into your app.

Type Map extracts interfaces, type aliases, classes, and enums. It shows extends (purple), implements (cyan), and property references (green dashed) as arrows between UML-style boxes.

Call Graph extracts functions, methods, and arrow functions. It renders a circular graph showing which functions call which. Handles this.method() calls within classes.

Module Graph handles multi-file input. You define files with // --- path/to/file.ts --- separators, and it shows file-level dependencies with import labels on edges.

Call Graph: trace the flow from main() through 15 functions

What surprised me

The TypeScript compiler API is powerful but barely documented for this kind of use. The two-pass approach was the key insight: first walk the AST to collect all known type names, then walk again to resolve relationships. Without pass one, you can't tell if User in author: User refers to a local interface or an external library type.

The SVG rendering is hand-built. No D3, no chart library. Grid layout for type maps, circular layout for call graphs, force-directed for modules. The whole app is about 1,000 lines of TypeScript.

What it's not

It's not a replacement for full tools like dependency-cruiser or Jelly. Those run on your full repo with real module resolution. Code Explorer works on pasted snippets. It's the "quick sketch on a napkin" version: paste your types, see if the relationships match what's in your head.