> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wji.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigating the canvas

> Zoom, pan, fit the view, use the minimap, and switch rendering performance.

## Zoom

<Frame caption="The viewport control bar">
  <img src="https://mintcdn.com/wji/1nwL1jaWRdmAhYLq/images/infinite-canvas/viewport-bar-01.png?fit=max&auto=format&n=1nwL1jaWRdmAhYLq&q=85&s=3a572950b56d39b276df7773b3183f0f" alt="Viewport control bar showing undo, redo, zoom out, zoom percentage, zoom in, fit, minimap toggle, and performance mode" width="1600" height="900" data-path="images/infinite-canvas/viewport-bar-01.png" />
</Frame>

| Action          | How                                           |
| --------------- | --------------------------------------------- |
| Zoom in and out | `⌘` + scroll wheel                            |
| Zoom in         | `⌘ =`                                         |
| Zoom out        | `⌘ -`                                         |
| Pinch           | Trackpad pinch, with extra sensitivity on Mac |

The zoom range is **10% to 312.5%**. The current percentage shows in the viewport control bar
bottom left.

<Note>
  WJI intercepts `⌘` + scroll so the browser does not zoom the whole page instead.
</Note>

## Pan

* **Space + drag**
* **Middle mouse button drag**
* **Scroll wheel** to move vertically, `Shift` + scroll to move horizontally

Dragging a node toward the edge of the screen scrolls the canvas automatically.

## Framing the view

| Action                | Shortcut                                      |
| --------------------- | --------------------------------------------- |
| **Fit all nodes**     | `Shift + Z`, or the button in the control bar |
| **Zoom to selection** | `Tab` or `Z`                                  |

Both animate rather than jumping. When you zoom to a single generation node, the generation panel
below it is included in the framing so you can read it.

## Minimap

<Frame caption="The minimap, colored by node tag">
  <img src="https://mintcdn.com/wji/1nwL1jaWRdmAhYLq/images/infinite-canvas/minimap-01.png?fit=max&auto=format&n=1nwL1jaWRdmAhYLq&q=85&s=2b1ced6a5f3cf979e3f636de8c1faed3" alt="Minimap in the corner of the canvas showing node positions in several tag colors" width="1600" height="900" data-path="images/infinite-canvas/minimap-01.png" />
</Frame>

Toggle it from the map icon in the control bar. It is capped at 220×140, colors nodes by their color
tag, and clicking it navigates.

## Grid

The background is a dot grid in world coordinates — 20 px spacing, scaling with zoom. It is always
on.

<Warning>
  There are no snap or alignment guides while dragging. Alignment in WJI is a deliberate action you
  apply afterwards from the multi-select toolbar, not something that happens as you move a node.
</Warning>

## Performance mode

The lightning icon switches between **standard** and **fast** rendering. Fast mode hides connection
lines and label chrome, and stops drawing connection handles below 20% zoom. On a heavy canvas it is
the difference between smooth panning and not.

The setting is remembered.

## Viewport memory

Your zoom and position are remembered per canvas, so returning to a canvas puts you back where you
were.