Managing Files

Right-Click Context Menu

Right-click a file or folder in VS Code Explorer and select "Open in Canvas" to add it.

Open Changed Files

Press Shift+O to automatically add all files with uncommitted git changes. The Changed Files button in the action bar shows a badge with the count.

Folder Files Buttons

Use the action bar buttons to add related files:

• Folder (shallow) - Add sibling files from the same directory
• Folder (recursive) - Add all files from the folder tree

Single Selection

Click a node to select it. The selected node gets a highlight outline.

Multi-Selection

Clear Selection

Press Esc to deselect all nodes.

Selection-Aware Features

Many features work differently based on selection:

• Layout algorithms apply only to selected nodes
• Fit view (Shift+F) fits only selected nodes
• References/Imports buttons work on the selection
• Open in VS Code opens all selected files

Manual Positioning

Click and drag nodes to move them. When moving multiple selected nodes, they all move together maintaining their relative positions.

You can also drag nodes by their folder labels. Dragging a folder label moves all nodes in that folder.

Automatic Layout

Use layout algorithms to arrange files automatically:

Enable Auto Layout (Alt/Option+A) to automatically arrange nodes when added or changed.

Close Selected

Press Delete, Backspace, or Cmd/Ctrl+X to close selected nodes from the canvas.

Clear All

Press Shift+X to close all nodes from the canvas.

Note: Closing nodes from the canvas doesn't delete the actual files. It only removes them from the visualization.

Open in VS Code Editor

Alt/Option+Click a node to open that file in the VS Code editor for editing.

From the action bar Open Files button:

• Click to open all selected files
• Shows badge with count of selected files

Refresh Files

Press Shift+R to reload the content of all open files. Use this if files changed externally.

File Watcher

Code Canvas automatically detects file changes when File Watcher is enabled (default). When files change:

• Node content updates automatically
• Git diff visualization updates
• Import/export connections refresh

Configure watched patterns in Settings → Ignore Patterns → File Watcher tab.

Open Changed Files

Press Shift+O or click the Changed Files button to add all uncommitted changed files to the canvas.

The badge shows:

• Total uncommitted changes
• How many are not yet on canvas

Auto Open Changed Files

Enable this in Settings or the File Actions toolbar section to automatically add changed files as you work.

Selecting Changed Files

• Select Deleted button - Select all files marked as deleted
• Changed files show git status indicators (green/yellow/red)

Select Parent Folder Files

Press \ (backslash) to select all files that are in the same parent folders as your current selection.

Select Unconnected

Press Shift+U to select nodes that have no edges (no import/export connections). Useful for finding isolated files.

Reflect Editor

When enabled in Settings, selecting a file in VS Code Editor automatically centers that file on the canvas.

• Start focused: Add a few key files first, then use References/Imports to expand
• Clean up: Use Shift+U to find and close unconnected files
• Undo mistakes: Cmd/Ctrl+Z undoes adding and closing nodes

• Navigating the Canvas - Pan and zoom controls
• Layout Algorithms - Automatic arrangement
• Visualizing Connections - Understanding connections