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

# Workflow Editor

> An introduction to the visual workflow editor.

The Workflow Editor is a drag-and-drop canvas where you design automations by connecting nodes. Each node represents a step in your workflow: a trigger, an action, a condition, a loop, and more.

## Editor layout

The editor has three main areas:

| Area                 | Location    | Purpose                                                |
| -------------------- | ----------- | ------------------------------------------------------ |
| **Node Palette**     | Left panel  | Draggable node types you can add to the canvas         |
| **Canvas**           | Centre      | The main workspace where you arrange and connect nodes |
| **Properties Panel** | Right panel | Configuration for the selected node                    |

## What you can build

Workflows in Spojit support:

* **Sequential logic**: steps that run one after another
* **Conditional branching**: if/else paths based on data
* **Loops**: iterate over arrays, repeat a fixed number of times, or loop while a condition is true
* **Parallel execution**: run multiple branches at the same time
* **Sub-workflows**: reuse existing workflows as building blocks
* **Human-in-the-loop**: pause for manual approval before continuing
* **AI-powered execution**: let an AI agent decide which tools to use based on a prompt

## Quick example

A simple order-processing workflow might look like this:

```
Trigger (webhook) → Get Order (Shopify) → Condition (order > $100?)
                                            ├── Yes → Send VIP Email (Resend)
                                            └── No  → Send Standard Email (Resend)
```

## Next steps

<CardGroup cols={2}>
  <Card title="Canvas Basics" icon="arrows-up-down-left-right" href="/workflow-editor/canvas-basics">
    Learn to navigate and interact with the canvas.
  </Card>

  <Card title="Building Workflows" icon="sitemap" href="/workflow-editor/building-workflows">
    Follow a step-by-step tutorial to build a real workflow.
  </Card>

  <Card title="Node Types" icon="shapes" href="/workflow-editor/nodes/trigger">
    Explore all available node types in detail.
  </Card>

  <Card title="Running Workflows" icon="play" href="/workflow-editor/running-workflows">
    Execute and test your workflows.
  </Card>
</CardGroup>