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

# Canvas Basics

> Learn to navigate, add nodes, and connect them on the visual canvas.

The canvas is the main workspace of the Workflow Editor. This page covers the essential interactions you need to build workflows.

## Navigation

| Action          | Input                                                                     |
| --------------- | ------------------------------------------------------------------------- |
| **Pan**         | Click and drag on empty space, or use the scroll wheel                    |
| **Zoom in/out** | Scroll wheel, or use the zoom controls in the toolbar                     |
| **Fit to view** | Click the fit-to-view button in the toolbar to centre all nodes           |
| **Minimap**     | A minimap in the bottom-right corner shows an overview of the full canvas |

## Adding nodes

<Steps>
  <Step title="Open the node palette">
    The node palette is on the left side of the editor. It lists all available node types: Trigger, Connector, Transform, Condition, Loop, Parallel, Human, Sub-workflow, and Variable.
  </Step>

  <Step title="Drag a node onto the canvas">
    Click and drag a node type from the palette and drop it on the canvas. The node appears at the drop position.
  </Step>

  <Step title="Configure the node">
    Click the node to select it. The properties panel opens on the right, where you can set the node's name, connector, tool, and parameters.
  </Step>
</Steps>

## Connecting nodes

Nodes have **handles** (small circles on their edges) that you use to create connections.

<Steps>
  <Step title="Start from an output handle">
    Hover over the output handle (bottom or right side) of a node. The handle highlights.
  </Step>

  <Step title="Drag to an input handle">
    Click and drag from the output handle to the input handle (top or left side) of another node. A line appears to show the connection.
  </Step>

  <Step title="Release to connect">
    Drop on the target handle. The connection is created and data will flow along this path at runtime.
  </Step>
</Steps>

<Tip>
  Some nodes have multiple output handles. For example, a **Condition** node has separate handles for the **True** and **False** branches.
</Tip>

## Selecting and moving nodes

* **Select** a node by clicking on it.
* **Move** a node by clicking and dragging it.
* **Multi-select** by clicking and dragging on empty canvas space to create a selection rectangle.
* **Delete** a selected node or connection by pressing the **Delete** or **Backspace** key.

## Toolbar

The toolbar at the top of the canvas provides:

| Button            | Action                                   |
| ----------------- | ---------------------------------------- |
| **Save**          | Save the current workflow                |
| **Run**           | Execute the workflow                     |
| **Zoom In / Out** | Adjust zoom level                        |
| **Fit View**      | Centre and fit all nodes in the viewport |
| **Undo / Redo**   | Undo or redo recent changes              |

## Tips

* Start every workflow with a **Trigger** node, as it's the entry point.
* Connect nodes from top to bottom or left to right for readability.
* Give each node a descriptive label so your workflow is easy to understand at a glance.
* Use the minimap to navigate large workflows quickly.