Your entire codebase. As a city you can walk through.
CodeScape reads your code and builds a 3D environment from it. Every function is a building. Every import is a pathway. Every error is a red landmark you can't miss. It updates in real time as you write.
Try Early AccessCode becomes architecture.
Every element of your codebase has a physical representation.
Buildings
Height represents complexity. Taller buildings = more lines of code.
Pathways
Follow a pathway to trace any dependency chain in seconds.
Red landmarks
Impossible to miss. The moment an error exists, the building glows red.
Districts
Related code lives together. Your /auth folder is a neighborhood.
Bridges
External connections stand out — see every point your code touches the outside.
Green glow
Tested code has a visible foundation. Untested code stands exposed.
Bugs announce themselves.
The moment an error exists in your code, the corresponding building glows red. Not after a build. Not after running tests. Instantly. Hover the red building to see the error. Click it to jump to the line in your IDE.
- Syntax errors, type errors, runtime exceptions — all visualized
- Error propagation shown — see which buildings are affected downstream
- Severity indicated by glow intensity and pulse speed
Trace any connection in seconds.
Hover any building. Every building it imports from lights up. Every building that imports it lights up differently. You see the full dependency tree not as a text list, but as visible architecture.
- Bidirectional: see imports AND importers
- Circular dependencies shown as looping pathways
- Dead code visible as isolated buildings with no connections
It updates as you type.
Connected to your editor through a lightweight extension. Save a file — the corresponding building updates. Add a new function — a new building rises. Delete code — its building dissolves.
- VS Code extension (13ms average sync latency)
- Two-way: click building → jump to code. Click code → highlight building.
- Works with any file watcher compatible editor
Walk through your architecture.
Zoom out to see the entire city. Zoom into a single building to read the code. Walk along pathways to understand flow. Fly above to see patterns.
- Mouse/keyboard/trackpad controls — configurable
- Bookmarks: save camera positions for frequent locations
- Search: type a function name, fly directly there
Built by developers. For developers.
Lightweight. Fast. No black boxes.
AST-based analysis. Reads your code's structure without executing it. Language-specific parsers for JavaScript, TypeScript, Python.
Converts AST into a directed graph. Nodes = code blocks. Edges = relationships. The graph is the city's blueprint.
Three.js with instanced meshes. Handles 5,000+ buildings at 60fps. LOD system reduces complexity at distance.
File watcher → diff detection → incremental graph update → renderer patch. Average 13ms end-to-end.
VS Code extension communicates via local WebSocket. Click-to-navigate both directions. Zero network calls.
$ npx codescape init✓ Detected: TypeScript project (Next.js)✓ Parsed: 1,247 files → 3,891 code blocks✓ Mapped: 6,234 connections✓ City ready: http://localhost:3333Open in browser or VS Code sidebar.
Works with your stack.
Today and what's coming next.
Languages
Frameworks
Editors
See it for yourself.
The only way to understand CodeScape is to use it. Join the prototype.
Get Early AccessFree during prototype. Takes 30 seconds.