See your codebase on an infinite canvas
Not just a diagram. Your actual code organized by dependencies and folder structure.
Supported languages and frameworks
Full dependency analysis and LSP integration.
⚡ Quick Start
Open the Canvas
Open a folder or workspace in VS Code, then use any of these entry points:
- Command Palette: Run Code Canvas: Open Code Canvas (
Cmd/Ctrl + Shift + P)
- Status Bar: Click Code Canvas in the bottom right
- Side Panel: Open the Code Canvas panel from the Activity Bar, then click Open Code Canvas
Open Files on the Canvas
- From Explorer: Right-click a file or folder, then choose Open in Canvas
- From Code Canvas: Drag files from the workspace panel onto the canvas
- From the app: Use the file tree, search panel, or changes panel to open more context
- Back to VS Code:
Alt/Option + Click a file on the canvas
✨ What You Can Do
Understand Architecture
Code Canvas lays out files by folder structure and dependency direction, so the canvas shows how modules actually relate to each other.
- See structure: Imports and exports become dependency edges
- Find problems: Spot circular or backwards dependencies
- Control detail: Collapse folders when you need the high-level shape
- Move between scales: Zoom in for code, zoom out for structure
Review Changes in Context
Open local changes or pull requests on the canvas and review diffs beside the surrounding files and dependencies.
- Open changes fast: Open changed files with one action
- Choose your view: Switch between changes, unified, and split diff modes
- Reduce noise: Collapse unchanged regions
- Review with context: See how a change connects to the rest of the system before approving it
Use Language Server Highlights
Language servers add semantic connections on top of the file graph. Hover or click a symbol to highlight references, definitions, implementations, incoming calls, and outgoing calls across open files.
- Bundled TypeScript: TypeScript support ships with the extension
- Pin relationships: Keep multiple token graphs visible at once
- Open semantic context: Jump to importers, imports, and top-level symbols
- Stay synced: Mirror the active VS Code editor cursor and selection into the canvas
Keep a Mental Model as Code Evolves
Use the canvas as a live map while you work, especially when AI agents or large refactors change files across the project.
- Track boundaries: See folder and module boundaries as they shift
- Follow flow: Move across files without losing place
- Refresh structure: Re-layout the canvas as the architecture changes
- Keep context visible: Work with important surrounding files still in view
Connect AI Agents Through MCP
Code Canvas includes MCP support so agents can explain code directly on the canvas with navigable notes.
- Ask for explanations: Have an agent explain a feature, flow, or dependency chain
- Use navigable notes: Link directly to files, folders, symbols, and code ranges
- Jump to targets: Click a note link to navigate the canvas to the exact location
- Read beside the code: Keep explanations next to the real files they describe
💳 Free and Pro
Opening public GitHub repositories is free without signing in, including local-server powered LSP and MCP features. Pro Plan gives you access to private repositories, local repositories with live file changes, and pull request previews.
The VS Code extension is designed for local workspaces, so sign in when prompted to use local or private project features.
🔒 Privacy
Code Canvas is designed so your source code stays on your machine.
- Local analysis: Workspace indexing, dependency analysis, language servers, diffs, and file reads run locally
- GitHub authentication is used for sign-in, private repository access, and Pro plan subscription state.
🔗 Useful Links
