> ## 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.

# Infinite Canvas overview

> A node-based workspace where connections carry context into every generation.

The **Infinite Canvas** is a board you place nodes on and wire together. It is the app to use when
one image is not the unit of work — when you are building a sequence, keeping a set of shots
consistent, or assembling a cut.

<Frame caption="A canvas with connected nodes">
  <img src="https://mintcdn.com/wji/1nwL1jaWRdmAhYLq/images/infinite-canvas/overview-01.png?fit=max&auto=format&n=1nwL1jaWRdmAhYLq&q=85&s=59f2e3a2b59d532bfbaecd507916a80f" alt="Infinite Canvas showing image and text nodes connected into a generation node" width="1600" height="900" data-path="images/infinite-canvas/overview-01.png" />
</Frame>

## The one idea that matters

**A connection is not decoration. It is how context reaches the AI.**

Wire an image node into a generation node and that image becomes a reference. Wire a text node in
and its content is prepended to the prompt. Wire in a dataset and its members are expanded.

Once that clicks, the rest of the canvas follows. Read
[Connections and references](/infinite-canvas/connections-and-references) before anything else.

## What is on screen

<Frame caption="The canvas chrome: capsule toolbar, top bar, and viewport control bar">
  <img src="https://mintcdn.com/wji/1nwL1jaWRdmAhYLq/images/infinite-canvas/chrome-01.png?fit=max&auto=format&n=1nwL1jaWRdmAhYLq&q=85&s=a973030570dcb8ebe724f486ed60215e" alt="Canvas with the capsule toolbar on the left, top bar above, and viewport control bar bottom left highlighted" width="1600" height="900" data-path="images/infinite-canvas/chrome-01.png" />
</Frame>

| Area                                  | Contains                                                                     |
| ------------------------------------- | ---------------------------------------------------------------------------- |
| **Capsule toolbar**, left             | Create, asset library, generation history, director bar, settings, shortcuts |
| **Top bar**                           | Color tag filter, canvas switcher, search, canvas settings                   |
| **Viewport control bar**, bottom left | Undo/redo, zoom, fit, minimap, performance mode                              |
| **Director bar**, bottom              | A timeline for assembling clips — opened from the capsule toolbar            |
| **Save status**, top left             | Pending, saving, saved, or failed                                            |

Opening the canvas collapses the workspace's left panel to a narrow rail, and it stays collapsed
while you are here.

## The Alt key changes what a drag means

Alt — **Option** on a Mac — is the modifier to learn early. Without it, dragging **moves** things.
Hold it and the same gesture **files, duplicates, or fans out** instead. It behaves differently
depending on what you grabbed, so it is worth seeing every case in one place.

### Alt with a drag

| Hold Alt and drag                     | Onto                              | Result                                             |
| ------------------------------------- | --------------------------------- | -------------------------------------------------- |
| A node                                | Anywhere on the canvas            | **Duplicates** it — the original stays put         |
| A node's `+` handle                   | Several selected nodes            | **Fan-out** — one new node per source, one to one  |
| A media or text node                  | A **dataset node**                | Files it into that dataset                         |
| A media or text node                  | An **asset library dataset**      | Files it there                                     |
| A media or text node                  | The **gap between library cards** | Creates a new dataset at that position             |
| A media node                          | The **director bar**              | Adds a clip, or sets an existing clip's main media |
| A **thumbnail inside a dataset node** | Another dataset node              | Moves the asset between datasets                   |
| A **thumbnail inside a dataset node** | Empty canvas                      | Creates a media node from it                       |
| An asset in the **asset library**     | The canvas                        | Creates a node from it                             |

<Note>
  Drop somewhere Alt means nothing and WJI tells you where the valid targets are, rather than failing
  silently.
</Note>

### Alt with a key

| Shortcut              | Does                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------------ |
| `⌥` + `I` / `V` / `A` | One-to-one generation from **each** selected node, instead of one node                           |
| `⌥` + `1`–`8`         | Filter by tag — or, with generation nodes selected, connect every node carrying that tag to them |
| `⌥` + `0`             | Clear the tag filter                                                                             |
| `⌥` + `` ` ``         | Toggle pick-reference mode                                                                       |

The multi-select toolbar shows an `⌥` badge whenever holding Alt would change what the next drag
does, so you do not have to remember which gestures are overloaded.

## Where to go next

<Columns cols={2}>
  <Card title="Navigating the canvas" icon="magnifying-glass" href="/infinite-canvas/navigate-the-canvas">
    Zoom, pan, fit, and the minimap.
  </Card>

  <Card title="Creating nodes" icon="plus" href="/infinite-canvas/create-nodes">
    Six ways to put something on the board.
  </Card>

  <Card title="Node types" icon="shapes" href="/infinite-canvas/node-types">
    All fourteen, and what each is for.
  </Card>

  <Card title="Connections and references" icon="link" href="/infinite-canvas/connections-and-references">
    The core concept. Start here.
  </Card>
</Columns>
