> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frayme.io/llms.txt
> Use this file to discover all available pages before exploring further.

# The workflow builder

> Layout, workflow config, toolbar, palette, canvas interactions, loops, unsaved changes and read-only versions.

export const Clip = ({id, caption}) => <Frame caption={caption}>
    <video controls muted playsInline preload="metadata" className="w-full aspect-video rounded-xl" poster={`/videos/guides/${id}.poster.png`} src={`/videos/guides/${id}.mp4`} />
  </Frame>;

export const Shot = ({id, alt, caption}) => <Frame caption={caption}>
    <img className="block dark:hidden rounded-lg" src={`/images/guides/${id}.light.png`} alt={alt} loading="lazy" decoding="async" />
    <img className="hidden dark:block rounded-lg" src={`/images/guides/${id}.dark.png`} alt={alt} loading="lazy" decoding="async" />
  </Frame>;

The builder at `/workflow/<id>` is three resizable panels: workflow config and node palette on the left, the canvas in the middle, and the configuration of the selected node on the right.

<Shot id="engineer/builder-01-shell" alt="Builder with config panel, palette and canvas" caption="The onboarding review flow open in the builder." />

<Clip id="engineer/build-a-flow" caption="Create a flow, drag nodes onto the canvas, configure the Review node, save." />

## Workflow config

* **Result webhook** — the endpoint that receives this flow's decision. **Default** uses the tenant's default config; a deleted config shows as **(missing)** and blocks activation until fixed.
* **Callable as subflow** — lets a Subflow node in another flow run this one as a child case. A callable flow ends on an **Output** node instead of Approve or Deny.

<Shot id="engineer/builder-02-workflow-config" alt="Result webhook select" caption="Route the decision to a named webhook config." />

## Toolbar, left to right

Back to the list · flow name (editable) · status badge and version · **Unsaved changes** while dirty · billing popover (**Executions**, **Cost per run**, **Avg runtime**, **Lifetime runs**) · **Submit case** · **Executions** · **History** · **Export to file** · **Copy selected** · **Paste** · **Import from file** · undo and redo · shortcuts · **Activate** or **Deactivate** · **Validate** · **Save**.

<Shot id="engineer/builder-03-toolbar" alt="Toolbar" caption="Actions, clipboard and lifecycle controls." />

## Node palette

Drag a node onto the canvas. The sections are **Flow** (Input), **Decisions** (Approve, Deny), **Human review** (Review), **Integration** (Integration, HTTP Request, Send RFI), **Logic** (Assignment, Rule, Decision Table, Split, Scorecard, Script), **AI & ML** (AI Node) and **Orchestration** (Subflow).

<Tabs>
  <Tab title="Top-level flow">
    <Shot id="engineer/builder-05-palette-toplevel" alt="Palette for a top-level flow" caption="Every path has to finish on Approve or Deny." />
  </Tab>

  <Tab title="Callable flow">
    <Shot id="engineer/builder-06-palette-callable" alt="Palette for a callable flow" caption="A callable flow finishes on Output." />
  </Tab>
</Tabs>

## Canvas interactions

* Drag on empty canvas to box-select; drag with the middle or right button, or hold `Space`, to pan.
* `Shift`-click or `⌘`-click adds to the selection; a footer pill shows **n nodes selected**.
* Nodes snap to a 20 px grid. Hover an edge and click **×** to delete it.
* Connections the engine would reject are refused as you drag, with a message saying why. Terminal nodes accept no outgoing edges.
* **Zoom In**, **Zoom Out**, **Fit View** and the minimap sit in the corner.

<Shot id="engineer/builder-07-canvas-controls" alt="Canvas controls: zoom in, zoom out, fit view, lock" caption="Zoom, fit view and lock." />

## Loops

An edge back to an earlier node draws in blue with an arrowhead and takes its own lane, so re-check loops (for example a Review outcome that re-runs enrichment) read clearly.

<Shot id="engineer/builder-11-loop-edge" alt="A loop edge" caption="Back edges are drawn as loops." />

## Unsaved changes

Leaving with unsaved edits, by sidebar link, back button or closing the tab, asks you to save or discard first.

## View an older version read-only

Open a version with **View** from the list (`?version=N`). The palette is hidden, the toolbar shows **Read-only**, and a pill over the canvas reminds you to open the latest version to edit.

<Shot id="engineer/builder-10-readonly-version" alt="Read-only version view" caption="Older versions are immutable." />

## Billing popover

The **\$ / mo** chip opens this month's billing for the flow: last run, executions, cost per run, average runtime and lifetime runs.