Navigating the Canvas

Move around the canvas to explore different areas of your codebase.

Methods

Spacebar + Drag (recommended)

• Hold Spacebar and drag with the mouse
• Works anywhere on the canvas
• Cursor changes to a hand icon

Middle Mouse Button

• Hold middle mouse button and drag
• Quick way to pan without keyboard

Scroll Wheel (optional)

• If configured in settings, scroll wheel pans instead of zooms
• Change this in Settings → Scroll Behavior

Tips

• The canvas is infinite - you can pan in any direction
• Use Shift+F to quickly return to seeing all your nodes

Zoom in to read code details or zoom out to see the big picture.

Methods

Cmd/Ctrl + Scroll

• Hold Cmd (Mac) or Ctrl (Windows/Linux) and scroll
• Zooms toward the cursor position

Pinch Gesture

• Use two-finger pinch on trackpad
• Natural zooming like in other apps

Toggle Zoom Levels (F)

• Press F to quickly toggle between two saved zoom levels
• Great for switching between overview and detail views

Zoom Range

• Minimum: 1% (0.01x) - extreme overview
• Maximum: 100% (1x) - regular view

Zoom Levels

At different zoom levels, Code Canvas adjusts what's displayed:

Fit All Nodes (Shift+F)

Adjusts zoom and pan to show all nodes on canvas. Use this when you've lost track of your files.

Fit Selection

When nodes are selected, Shift+F fits only the selected nodes to view.

Automatic Fit

With Auto-Fit View enabled (Alt/Option+F), the canvas automatically fits to view after layout changes.

Press V to toggle the viewport details overlay, which shows:

• Current zoom level with zoom level thresholds
• Zoom toggle selector to choose the two levels between which F will toggle

Press F to toggle between the two saved zoom levels. This creates a quick way to switch between:

• Overview mode - See all files and their relationships
• Detail mode - Read code in a specific area

• Managing Files - Organizing nodes on canvas
• Layout Algorithms - Automatic arrangement
• Keyboard Shortcuts - All navigation shortcuts