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

# Canvas Navigation

> Add, connect, and cut nodes, pan and zoom the canvas, and use the sidebars and toolbar in Workflows.

Learn how to navigate, add, and manage nodes on the canvas, connect handles, and use the toolbar and sidebar features.

## Adding and Managing Nodes

**Add a new node:**

* Click **Nodes** in the left sidebar

<Frame>
  <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-01.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=fcc6940a9a45959e6b9a8f4c423aaed8" alt="Nodes panel open from the left sidebar, with a search field, category filters, and the Add and Image node lists" width="320" height="900" data-path="images/workflows/canvas-navigation-step-01.png" />
</Frame>

* Right-click or double-click anywhere on the canvas
* Search or browse by category

<Frame>
  <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-02.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=3658c31b688692a5f9bd63c6eece57e6" alt="Node library opened on the canvas with the Search nodes or models field, category filters, and Add and Image sections" width="1440" height="900" data-path="images/workflows/canvas-navigation-step-02.png" />
</Frame>

* Click to add the node

**Move a node:**

* Click and drag it to the desired location

**Remove a node:**

* Select it (Highlighted) and Press `Delete` or `Backspace`

**Duplicate a node:**

* Select it and Press `Ctrl/Cmd + D`

## Connect and Manage Handles

**Connect a Handle:**

* Click and drag from an output slot (right side of a node) and connect to a compatible input slot (left side of another node)
* Release to connect the handle

<Frame>
  <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-03.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=dde4feb5f395f14089380e5056b5d0e5" alt="Image, Copilot, and Video nodes on the canvas joined by colored connections between output and input handles" width="1440" height="900" data-path="images/workflows/canvas-navigation-step-03.png" />
</Frame>

**Remove a Handle:**

* On hovering the handle, a `"x"` button appears to remove/delete it
* Click to select it (Highlighted) and Press `Delete` or `Backspace`

## Cut Connections with Scissors

The **Remove edges** tool (scissors icon) lets you sever node connections by dragging across them — useful for quickly cleaning up complex graphs without having to click each handle individually.

**To use the Scissors tool:**

<Steps>
  <Step title="Activate the Remove edges tool">
    Click the scissors icon in the bottom toolbar, or press `K`. The icon opens a small menu where you can switch between **Remove edges** and **Connection** (`L`).

    <Frame>
      <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-04.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=6e9d0807dac9c456eca3d9c004e4d86a" alt="Bottom toolbar with the scissors icon selected and its menu showing the Remove edges and Connection tools" width="620" height="120" data-path="images/workflows/canvas-navigation-step-04.png" />
    </Frame>
  </Step>

  <Step title="Draw across connections">
    Drag across any connections you want to remove. Every connection you cross is severed. Press `S` to go back to the Select tool when you're done.

    <Frame>
      <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-05.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=c2c122f83c7dcb34134de44e0bba5f05" alt="Canvas after a cut with Remove edges active: the connection between the image node and the Video node is gone" width="1440" height="900" data-path="images/workflows/canvas-navigation-step-05.png" />
    </Frame>
  </Step>
</Steps>

<Tip>
  Use **Remove edges** when reorganizing a large workflow — it's much faster than deleting handles one by one.
</Tip>

## Canvas Navigation

**Pan the canvas:**

* Hold `Space` and drag
* Scroll with the mouse wheel, drag with the **middle mouse button**, or use a **two-finger drag** on a trackpad

<Note>
  With the Select tool, clicking and dragging on empty space draws a selection box instead of panning.
</Note>

**Zoom:**

* Hold `Ctrl/Cmd` and scroll, or use the **pinch gesture** on a trackpad
* Press `Ctrl/Cmd + Plus` or `Ctrl/Cmd + Minus`
* Click the zoom percentage in the bottom-left corner to open the zoom menu: **Zoom in**, **Zoom out**, **Zoom to fit**, **Zoom to 50%**, **Zoom to 100%**, and **Zoom to 200%**

<Frame>
  <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-06.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=3fc4441022dd1015460dddb3f45b44dd" alt="Zoom menu open from the zoom percentage in the bottom-left corner, listing Zoom in, Zoom out, Zoom to fit, and Zoom to 50%, 100%, and 200%" width="420" height="300" data-path="images/workflows/canvas-navigation-step-06.png" />
</Frame>

You can zoom from **1%** up to **200%**. Zooming out to 1% lets you see and move around very large canvases. The dotted grid stays visible at every zoom level, so you always keep your sense of position.

<Frame>
  <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-07.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=6351ac88a0958c15ebfba88a544d3718" alt="Canvas zoomed out to 1%, with the whole workflow shrunk to a small cluster and the dotted grid still visible" width="1440" height="900" data-path="images/workflows/canvas-navigation-step-07.png" />
</Frame>

**Minimap:**

* Click the map icon next to the undo and redo buttons in the bottom-left corner to show or hide the **Minimap**

## Left Sidebar

| Button | Function |
| - | - |
| **Content** | Manage the workflow's **Pages** and saved **Variables** |
| **Nodes** | Browse or search every node, grouped by category such as Image, Video, Audio, and Text |
| **Search** | Search everything in Workflows, including projects, models, assets, and nodes (`Cmd/Ctrl + K`) |
| **Assets** | Access your **Uploaded Assets** and **My Creations**, or bring in media from Pinterest, Google Drive, Dropbox, Unsplash, and Pexels |
| **Presets** | Browse ready-made workflow presets by category, such as Marketing, Branding, and E-commerce and Product |

## Bottom Toolbar

| Button | Function |
| - | - |
| **Select** | Select and move nodes. Hold `Space` to pan the canvas |
| **Remove edges** / **Connection** | Cut connections, or switch to drawing connections |
| **Image**, **Video**, **Audio**, **Text** | Add a node of that type |
| **Ad Maker** | Add an Ad Maker node |
| **Section** | Add a section to group related nodes |
| **Sticky notes, shapes, and more** | Open the **Collab** panel with stickers, shapes, sticky notes, text, and drawing tools |
| **Upload file** | Upload media to the canvas |

The group on the right switches between **nodes**, **quick mode**, and **agent mode**. The controls on the left show the **Minimap**, undo and redo, and the zoom menu.

<Frame>
  <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-08.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=1894982661ec8c23d3c7b89ec2f8d123" alt="Bottom of the canvas showing the Minimap, undo, redo, and zoom controls on the left, the main toolbar in the center, and the mode switcher on the right" width="990" height="85" data-path="images/workflows/canvas-navigation-step-08.png" />
</Frame>

## Right Sidebar

**Nodes Properties and Model Settings:**

When you select a node or multiple nodes, the right panel displays settings specific to your selection and the chosen model.

<Frame>
  <img src="https://mintcdn.com/imagineart/Vb1Na0GMZ7_ATkaY/images/workflows/canvas-navigation-step-09.png?fit=max&auto=format&n=Vb1Na0GMZ7_ATkaY&q=85&s=43d3ec85255744ccef3db0c9e71e20e1" alt="Selected Copilot node with the right sidebar showing Properties, the Gemini 3.1 Pro model, System Prompt, Max Tokens, Number of runs, and Run Selected" width="1440" height="900" data-path="images/workflows/canvas-navigation-step-09.png" />
</Frame>

| Feature | Description |
| - | - |
| **Node Properties and Model Settings** | When a node or multiple nodes are selected, the right panel shows specific settings and the model configurations |
| **Model Selection** | Choose from available models; settings and parameters (such as aspect ratios, resolution, etc.) will dynamically adjust based on your selection |
| **Number of Runs** | Specify how many times the selected node(s) should execute |
| **Run Selected** | Execute the selected node(s) with your configured settings |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.