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

# Flow Editor

> The visual drag-and-drop editor for building WhatsApp conversation flows.

## Overview

The Flow Editor is a visual canvas where you design conversation flows by placing nodes and connecting them with edges. It's built on top of React Flow, providing a smooth and intuitive drag-and-drop experience.

## Canvas

The canvas is your workspace. You can:

* **Pan** — Click and drag on empty space to move around
* **Zoom** — Use the scroll wheel or pinch to zoom in/out
* **Select** — Click a node to select it

## Toolbar

The toolbar contains all available node types organized by category. Click or drag a node from the toolbar to add it to the canvas.

On mobile devices, the toolbar converts to a modal overlay for easier access.

## Nodes

Every flow starts with a **Start** node. From there, you connect nodes to define the conversation path. Each node type serves a specific purpose:

<CardGroup cols={2}>
  <Card title="Messages" icon="message">
    Send text, media, and interactive content to the user.
  </Card>

  <Card title="User Input" icon="hand-pointer">
    Wait for user responses with buttons, lists, or text menus.
  </Card>

  <Card title="Logic" icon="code-branch">
    Route the conversation based on conditions and variable values.
  </Card>

  <Card title="Integrations" icon="plug">
    Call external APIs and AI services.
  </Card>

  <Card title="Data" icon="database">
    Parse, filter, and transform data.
  </Card>

  <Card title="Actions" icon="flag-checkered">
    Transfer to agents or end the conversation.
  </Card>
</CardGroup>

## Connections

To connect two nodes:

1. Hover over the **output handle** of a node
2. Click and drag to the **input handle** of another node
3. Release to create the connection

### Connection rules

* The **Start** node cannot receive incoming connections
* Nodes with option handles (Button, List, Condition, API Request) must use their specific output handles — not the generic source
* Each option handle supports exactly **one** outgoing connection
* Self-loops are only allowed on **wait** nodes (Button, List, Message Menu) via option handles
* Duplicate connections between the same nodes via the same handle are not allowed

## Copy & Paste

You can copy selected nodes and paste them elsewhere on the canvas. The pasted nodes get new IDs and maintain their relative positions.

## Undo & Redo

The editor supports undo/redo for most operations, allowing you to experiment freely.

## Responsive design

The editor adapts to different screen sizes:

| Viewport     | Width      | Node width |
| ------------ | ---------- | ---------- |
| Desktop      | > 1024px   | 340px      |
| Tablet       | 768–1024px | 260px      |
| Mobile       | ≤ 768px    | 200px      |
| Small mobile | ≤ 480px    | 140px      |

## Themes

The editor supports **light** and **dark** modes. Toggle between them using the theme switcher in the application header.

## Languages

The editor is available in:

* **English** (en)
* **Portuguese - Brazil** (pt-BR)