Settings

• Shortcut: Cmd/Ctrl+,
• Toolbar: Click Settings icon in toolbar footer
• Location: Opens as a modal panel

Auto Open Canvas

Toggle: Open canvas when VS Code starts

When enabled, Code Canvas automatically opens its panel on startup.

Show Undo/Redo Toasts

Toggle: Display toast notifications for history actions

Shows brief notifications when you undo or redo actions.

Show Workspace Panel

Toggle: Display workspace overview panel

Shows the workspace folder structure when canvas is empty.

Scroll Behavior

Options: Zoom or Pan

Note: Zoom always works with Cmd/Ctrl + scroll regardless of this setting.

Max Folder Label Segments

Number input: How many overlapping folder labels to show

When folder labels overlap on the canvas, they are hidden under a dropdown. Hover over a folder label to see which other labels are hidden because they overlap.

This setting controls how many of those hidden labels are shown on the right side of the folder label instead of being tucked away in the dropdown.

Theme

Options: Light or Dark

Configure which files and folders Code Canvas should exclude.

Tabs

Pattern Types

Ignored Files

Specific filenames to ignore:

• package-lock.json
• .DS_Store
• etc.

Ignored Directories

Folder names to skip:

• node_modules
• .git
• dist
• build
• etc.

Ignored Extensions

File extensions to exclude:

• .map
• .min.js
• .lock
• etc.

Ignored Regex Patterns

Advanced pattern matching with regular expressions:

• .*\.test\..* (test files)
• __snapshots__ (Jest snapshots)
• etc.

Git Ignore Integration

Code Canvas warns when patterns might be covered by your .gitignore. Use the auto-add suggestions to sync patterns.

Reset Options

• Reset to defaults - Restore default patterns
• Clear all - Remove all patterns

Configure how symbols are displayed.

Display Mode

Color Legend

Visual reference showing which colors map to which symbol types:

• Functions
• Classes
• Methods
• Variables
• etc.

View and export your codebase's dependency structure.

Statistics Display

• Total node count
• Total edge count

Export Options

Live Preview

JSON view of the current dependency graph structure.

Manage configuration file discovery.

Scan for Config Files

Click to scan workspace for:

• tsconfig.json
• jsconfig.json
• svelte.config.js
• vite.config.js
• composer.json
• And more

Config File List

Shows discovered config files with:

• File icon by type
• Full path
• Clear button per file

Clear All

Remove all discovered config file associations.

Some settings are also accessible from toolbar sections:

File Actions Section

Canvas Visualization Section

What's Saved Locally

Workspace vs Global

At the bottom of General Settings:

Danger Zone: Reset All Settings

This resets:

• All toggle settings to defaults
• Ignore patterns to defaults
• Toolbar positions
• Saved zoom levels

Confirmation dialog required.

Some behaviors are controlled by the environment:

Development Mode

Additional debug panels and tools appear when running in development mode.

Extension Storage

Canvas configurations and user preferences are stored in VS Code's extension storage directory.

• Start with defaults: The default ignore patterns work well for most projects
• Watch for gitignore overlap: Use the suggested patterns from git ignore detection
• Export for sharing: Use the dependency graph export to share visualizations
• Config scanning: Run config scan when opening a new project

• Toolbar - Toolbar settings
• Keyboard Shortcuts - All shortcuts