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.

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.

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 | | Nodes | Explore all available node types |