Flow Editor

​

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:

​

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:

​

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)