Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>code canvas appNew to Visual Studio Code? Get it now.
code canvas app

code canvas app

Alex C

|
1,231 installs
| (2) | Free
View your code on an infinite canvas
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

code canvas app

See your code flow and file connections on an infinite canvas.

Explore file relationships, understand application flow, and gain insights into your project structure in a more intuitive way.

Supporting JavaScript TypeScript React for now, although some of the features might work for other languages


Features:

1. Opening files in the canvas

ℹ️ Show details

** Opening the canvas: **

  • Type Open Code Canvas in the Command Palette (Cmd + shift + P)
  • Click Code Canvas icon in the bottom right corner

** Navigating: **

  • Cmd + scroll to zoom
  • Hold Space to enable panning, then drag from an empty space on the canvas
  • Use the minimap controls or drag on the minimap to move (Press M to toggle minimap)

** Opening / closing files: **

  • Right Click a file or folder in the side bar and select Open in Code Canvas
  • Select files and hit Backspace or Cmd + X to close them. Shift + X to close all files
  • Drag out the import handle to open imported files

Node Toolbar

  • Open all imported files by clicking the right arrow in the file node toolbar
  • Or open all files that import that file by clicking the left arrow
  • Option + click on an arrow to see the list of files and select which ones to open


2. Real-time display of local changes

Particularly useful for understanding changes done by AI assistants, or reviewing large amounts of edits across multiple files before committing

  • Press Shift + O to open all the files in the current workspace that have any changes (added, removed, edited)
  • Editing a file automatically opens it in the canvas
  • Changes are automatically refreshed when you commit, stage, or unstage files


3. Visual display of token references and their connections

  • Click on a token (functions, variables, params, etc) to open a dropdown with a list of references, definitions, implementations, as well as outgoing and incoming calls for functions
    • (Press R to toggle the display of the references dropdown when tokens are selected)
  • Trace code execution paths visually: see relationships between functions and their references throughout all the files in the codebase


4. Layout algorithms for organizing your selected files

  • Layout options with keyboard shortcuts (Shift + 1, 2, 3, 4, etc) to organize your view
    • Select files to apply the algorithm only to the selection
  • Shit + 1 is a custom layout algorithm with adjustable parameters. Open the Layout Panel in the toolbar to customize it
  • Auto-fit and spacing options apply only to algos from 2 onwards


🔒 Privacy & Security

Your code stays on your machine

  • All code processing is done locally on your device
  • No code is ever sent to external servers
  • Code analysis, syntax highlighting, and file relationships are computed entirely within VS Code
  • Git authentication is only used for subscription management - your repository content remains private

Analytics & Privacy

  • We collect anonymous usage analytics to improve the extension
  • No source code or file content is ever included in analytics data
  • Analytics data consists only of feature usage patterns and performance metrics
  • All personal and code-related information remains strictly on your device

For detailed information about data collection and usage, please see our Privacy Policy.



For any feedback / bug reports: codecanvas.userjot.com

or join the discord server: https://discord.gg/XgdGN9Z7ef

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft