The Visual Editor

> The visual editor is the interface you use to build flows -- including the canvas, toolbar, node menu, and all the controls for managing your work.

The Builder's visual editor is designed for fast, fluid flow construction. This page covers every interface element and interaction so you can work efficiently.

Canvas controls

The canvas is the infinite workspace where you place and connect nodes.

Pan

Move around the canvas by:

• Click and drag on an empty area of the canvas.
• Middle-click and drag anywhere on the canvas.

Zoom

Adjust the zoom level by:

• Scroll wheel up to zoom in, down to zoom out.
• Pinch gesture on a trackpad.
• Zoom controls in the bottom-left toolbar (+ and - buttons).

Fit to view

Click the Fit button in the toolbar to automatically zoom and pan so that all nodes in the current flow are visible on screen. This is useful after opening a large flow or when you have lost track of where your nodes are.

Double-click an empty area of the canvas to quickly re-center on the Start Node.

The node quick menu

The quick menu is the fastest way to add new nodes to your flow. There are two ways to open it:

Drag from a pin

Drag a wire from any pin and release it on an empty area of the canvas. The quick menu opens and automatically filters to show only nodes compatible with that pin's type.

This is the recommended way to add nodes, because it:

• Filters to compatible nodes only
• Automatically creates the connection when you select a node

Right-click the canvas

Right-click on any empty area to open the quick menu with the full list of available nodes. Use the search bar at the top to find a specific node by name.

The quick menu groups nodes by category (database, string, math, HTTP, etc.). Browse categories to discover nodes you might not know about.

Variable placement

Routes and functions with Local Variables show those variables in the detail panel and node dock.

• Drag a variable onto the canvas to place a Get or Set node.
• Pick a variable from the quick menu to place a Get node.
• Editable variables offer both Get and Set at the drop point.
• Non-editable variables place a Get node directly.

Connecting nodes with wires

Wires are the visual connections between nodes. They carry data or control execution order.

Creating a connection

1. Hover over an output pin on the right side of a node. 2. Click and drag to start a wire. 3. Drag the wire to a compatible input pin on another node. 4. Release to complete the connection.

Removing a connection

• Click on a wire to select it, then press Delete or Backspace.
• Alternatively, drag the wire away from the input pin it is connected to.

Type-colored connections

Wire colors correspond to data types, making it easy to trace data flow at a glance. Use the Type System page for the exact legend. In practice, the Builder uses:

| Wire color | Type | |------------|------| | White | sequence | | Teal | String | | Coral / red | Number | | Amber | Boolean | | Indigo | Object | | Purple | Enum | | Cyan | File | | Emerald | Web element | | Pink | Style | | Gray | Any / generic arrays |

Follow the wire colors to quickly trace how data moves through your flow without reading every node's configuration.

Breakpoints

> Breakpoints are small draggable knots that reshape a wire's path and keep busy graphs readable.

A breakpoint sits on a wire as a colored ring. Drag it to bend the wire around other nodes -- the connection passes straight through it, entering from the left and leaving on the right. Breakpoints are real nodes: you can select, move, and delete them. A knot accepts multiple incoming wires and fans its single output out to multiple targets.

Creating a breakpoint

• Double-click a wire to drop a breakpoint at that point. It takes the wire's type and splits the connection so it routes through the knot.
• Right-click the canvas -> Add Breakpoint to place a standalone knot at the cursor.
• Search "Breakpoint" in the quick menu to place one. Pull a wire off a pin and pick Breakpoint to create one already connected.

Wildcard typing

A breakpoint with no connections is a wildcard -- type any, shown as a gray ring -- so it can be wired to anything. As soon as a typed wire attaches, the knot adopts that type and its ring takes the matching color. Remove every connection and it returns to the wildcard state.

Pull a wire off a sequence pin and choose Breakpoint: the knot becomes a sequence break and connects in one gesture. The same works for any data type.

Deleting

Delete a breakpoint (select it, then Delete) and the wire reconnects directly from its source to its target, so removing a knot never breaks the flow.

The builder toolbar

The toolbar at the top of the editor provides essential actions:

Save

Saves the current state of your flow. Saving does not deploy -- it only persists your work so you can return to it later.

Deploy

Publishes the saved flow, making it live. For routes, this means the endpoint will respond with the updated logic. For functions, callers will use the new version.

Undo and redo

Step backward and forward through your recent changes. Undo reverts the last action (adding a node, moving a node, creating a connection, etc.), and redo re-applies it.

Undo history is cleared when you close the Builder or switch to a different route. Save frequently to avoid losing work.

Tabs

The Builder supports multiple open routes and functions via tabs at the top of the editor.

• Open a new tab by clicking a route or function from the sidebar while the Builder is open.
• Switch tabs by clicking on a tab.
• Close a tab by clicking the close icon on the tab.

Tabs let you quickly jump between related routes and functions without navigating back to the Dashboard.

Each tab maintains its own undo history and unsaved changes. Switching tabs does not discard your work.

Selecting and moving nodes

• Click a node to select it.
• Click and drag a node to move it on the canvas.
• Box select by clicking and dragging on an empty area while holding Shift to select multiple nodes.
• Delete selected nodes with the Delete or Backspace key.

Keyboard shortcuts

| Shortcut | Action | |----------|--------| | Ctrl/Cmd + S | Save | | Ctrl/Cmd + Z | Undo | | Ctrl/Cmd + Shift + Z | Redo | | Delete / Backspace | Delete selected nodes or wires | | Ctrl/Cmd + A | Select all nodes | | Ctrl/Cmd + C | Copy selected nodes | | Ctrl/Cmd + V | Paste copied nodes | | Ctrl/Cmd + D | Duplicate selected nodes | | Space + Drag | Pan the canvas |

What's next?

| Topic | Description | |-------|-------------| | Introduction | Builder fundamentals and core concepts | | Routes | Create and configure API routes | | Functions | Build reusable logic with functions | | Local Variables | Declare typed state for a route or function | | Nodes | Explore all available node types |