Flow Builder

The Flow Builder is your visual engineering environment. It provides an endless canvas where you build application backend logic by dragging, dropping, and connecting functions.

Unlike traditional programming that relies on variables, the Flow Builder uses a data-driven architecture. Data flows directly from one function's output to another's input, creating reactive, event-driven sequences (flows).

Building logic

To build your logic, you interact with functions directly on the canvas using the following core actions:

Adding functions

• From the library: Drag functions from the functions library in the left panel.

• Quick access: Use the toolbar for common utilities like echo, memory, trigger, or combine.

Sequencing functions

You create flows by drawing wires between functions. Click on the output of a function (or its modifier) from which you want to transfer data or events, and drag it to the part of the next function you intend to receive it.

• Output to trigger: Drag a connection to the trigger box of the next function if you want the completion of the first function to execute the second without handing over data.

• Output to input: Drag a connection to an input port to hand over specific data.

• Reactive inputs: An input on the second function can be internally connected to its own trigger. This ensures the function executes automatically whenever that input value is updated or changed.

Logic behavior

• Event-driven: Once a function completes, it passes data through the wire to immediately start the next step.

• Flexible routing: One output can drive multiple functions, and inputs can receive data from many sources across the canvas or UI.

Session isolation

It is important to understand that functions and flows execute in an isolated manner for each user session. This ensures that data processing for one user or machine does not interfere with another. Each session maintains its own state and logic execution path, providing a secure and predictable environment for multi-user applications.

Organizing logic

As your application grows, use these tools to keep the canvas clean and documented:

Grouping (Sections)

Select multiple functions and click the group icon in the toolbar to create a named container. This is a visual aid that can be collapsed to save space.

Sections have no impact on how the logic executes when using production apps.

Annotations

Use the annotation tool to place free-text notes anywhere on the canvas. These are ideal for documenting complex logic paths or leaving instructions for other developers.

Working in the canvas

The Flow Builder is an infinite space to build logic. These tools will help you work with it.

Controls

• Panning: Use your trackpad, or hold Shift + mouse wheel for horizontal movement and just the mouse wheel for vertical movement. You can also use WASD on your keyboard to pan.

• Zooming: Use trackpad pinch-to-zoom or hold Ctrl + mouse wheel. You can also zoom in and out using Q and E on your keyboard.

You can customize these controls (like mouse wheel behavior) in the App Builder settings.

Search and replace

To make bulk configuration changes, select at least two functions to activate the Search and replace tool in the toolbar. This allows you to find a specific string within the selected functions (such as a device's IP address) and replace it with a new value across all of them at once.

Search and replace currently only supports strings without spaces.