> For the complete documentation index, see [llms.txt](https://help.imagine.art/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.imagine.art/workflows/canvas-interface-walkthrough/canvas-navigation.md).

# Canvas Navigation

### Adding and Managing Nodes

**Add a new node:**

* Click on `"+"` or `"Toolbox"` from the left toolbar 

<div data-with-frame="true"><figure><img src="/files/EiG6BLv0QDG0kPKGhFLT" alt="" width="359"><figcaption></figcaption></figure></div>

* Right-click anywhere on the canvas (or press `Space`)
* Search or browse by category

<div data-with-frame="true"><figure><img src="/files/86BmcDQsjMaA0gbj0zFE" alt="" width="375"><figcaption></figcaption></figure></div>

* 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

<div data-with-frame="true"><figure><img src="/files/4yxZxotNp5UN12GyvfPm" alt=""><figcaption></figcaption></figure></div>

**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`

### Canvas Navigation

**Pan the canvas:**

* Click and drag on empty space
* Use the **middle mouse button** or **two-finger drag** on a trackpad.

**Zoom:**

* Use the **scroll wheel** (up/down) or the **pinch gesture** on a trackpad.
* Use zoom controls in the bottom-right corner.

### Left Toolbar

<table><thead><tr><th width="230.99609375">Button</th><th>Function</th></tr></thead><tbody><tr><td><strong>Core Nodes</strong></td><td>Essential nodes for content generation such as Image, Video, Text, and Prompt Node</td></tr><tr><td><strong>Utility Nodes</strong></td><td>All other functional or helping nodes to assist you in editing or refining part, such as Upscale, Reframe, Crop, Extract Frame, Import etc</td></tr><tr><td><strong>Search</strong></td><td>Find any node instantly with <code>Cmd + K</code></td></tr><tr><td><strong>Assets</strong></td><td>Access to all previous generations</td></tr><tr><td><strong>Move/Pan</strong></td><td>Navigate and move within the canvas</td></tr><tr><td><strong>Sections</strong></td><td>Organizational iterations for structuring and grouping canvas nodes</td></tr><tr><td><strong>Collaboration</strong></td><td>Intuitive collaboration tools featuring shapes, and sticky notes, and share the project link with your team</td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/lIvOYjbyfPOJFVucj7dK" alt="" width="413"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/IX5FKJq0qIgBo8clR1YY" alt="" width="563"><figcaption></figcaption></figure></div>

<table data-header-hidden><thead><tr><th width="232.62109375"></th><th></th></tr></thead><tbody><tr><td><strong>Node Properties and Model Settings</strong></td><td>When a node or multiple nodes are selected, the right panel shows specific settings and the model configurations.</td></tr><tr><td><strong>Model Selection</strong></td><td>Choose from available models; settings and parameters (such as aspect ratios, resolution, etc.) will dynamically adjust based on your selection</td></tr><tr><td><strong>Number of Runs</strong></td><td>Specify how many times the selected node(s) should execute</td></tr><tr><td><strong>Run Selected Nodes</strong></td><td>Execute the selected node(s) with your configured settings</td></tr></tbody></table>

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.imagine.art/workflows/canvas-interface-walkthrough/canvas-navigation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.