Skip to content
LogoLogo

Flow builder

The flow builder is a visual editor for an experience flow. You drag a block onto a canvas, connect the blocks with arrows, and set the options of each node in an inspector panel.

The flow builder with the library, canvas, and inspector panels

Layout

The flow builder has three panels, from left to right.

Library, on the left: it lists every step, action, condition, and field in your project. Drag an item from here onto the canvas.

Canvas, in the middle: the area where you build your flow. A node stands for a block. An arrow stands for a connection between two blocks.

Inspector, on the right: it shows the options of the node that you choose. When you choose no node, it shows the settings of the experience.

Panel controls

Drag a divider between two panels to change their size. Press Cmd/Ctrl+\ to turn both side panels on and off. Press Cmd/Ctrl+Shift+\ to turn the inspector on and off.

Move around the canvas

Zoom: scroll to make the view larger or smaller.

Pan: choose the hand tool with H, then drag. You can also hold Space and drag. A drag with the middle mouse button also pans.

Choose tool: press V to go back to the default tool. Click to choose a node. Drag on empty space to choose every node inside a rectangle.

Auto-layout

Click the auto-layout button in the toolbar. The flow builder then arranges every node into a clean hierarchy. This is useful after you add many nodes, and when the canvas becomes messy.