Workflow builder

A React block (a whole screen) in Beamline's Blocks category.

Automation rules for a SaaS without code: a trigger, conditions built with the query builder that branch into Yes and No, actions and waits, drawn as a flow you edit step by step; test it on sample records and watch each step decide, read past runs with what every step did, pause it with a reason everyone sees, and publish the draft only after reading what changed against the live version.

Part of Beamline UI: React UI components and complete screens for apps built with coding agents. The code is copied into your repo; your app never depends on our servers. Build your own style from any look; tokens, fonts, radii, motion; not only colours. 200+ components and 50+ complete screens. $49 launch price; one payment; your whole team, no seats. Lifetime updates: every new version of the complete system, for as long as we publish it, and every version you received stays yours. React 19, TypeScript, Tailwind v4, Radix. Free MIT sample, commercial use included. Made by Danylo Pravda in Kyiv, Ukraine.

Use it for

Automation rules people set up themselves: route tickets, alert sales, nudge trials, escalate what waits too long.
Any rule that runs on an event, decides on the record's fields and acts, where people need to test it, see what it did and change it safely.

Not for

Showing a fixed flow an agent will run, read-only (flowchart on its own).
Segments and saved filters with no actions (query-builder).
Watching agent runs and their traces (agent-runs).

Anatomy

app shell: your navigation with the workspace's automations as a group, each with its state in words (Live, Paused, Draft)
header: the workflow's name (rename in place), its version and state (v3 live · 2 changes in draft), the on/off switch, Test run and Publish (the page's primary action)
paused notice: who paused it, when and why, and Turn on
tabs: Build · Runs (count) · Changes (count)
flow: the flowchart of the draft (Build), of the live version painted with a run's or a test's step results (Runs, Test run); the chosen step carries the ring
step editor (Build): the trigger's event; a condition's rules (query builder with the matching count) and its Yes and No paths; an action's kind and settings; a wait's length; add a step after this one; remove the step
test run: a sample record (and its fields), Run test, then each step's outcome in words; nothing is sent
runs: the last runs as a strip of status blocks, the runs as a table, and the chosen run's steps with what each did and how long it took; a failed run says why with Run again
changes: the live version against the draft as one tree (added, removed, changed old → new), Publish and Discard draft

States

a new rule: only the trigger, never published (Publish makes v1 live; the switch waits for it)
draft matches the live version; draft with changes (counted on the tab and in the header)
a step unfinished (a rule with no value, an action with no queue): said on the step, Publish disabled and the reason beside it with Show
publishing, published, refused (the current draft stays as built; a later pause survives the refusal; Try again publishes the current valid draft)
on; asking why (the switch stays on until a reason is given); paused with its reason; turning on; a refused switch goes back and says why
test run: choosing a sample, running (steps decide one at a time), done (each step's outcome), a condition that does not hold (its path skipped)
runs: loading, none yet, completed, waiting at a wait step (resumes at), failed at a step (the reason, Run again)

Keyboard

Tab: name, switch, Test run, Publish, the tabs, the flow, then the step editor
The flow is one tab stop walked with the arrows (the flowchart's own); Enter opens a step in the editor
Every control in the editor is the system's own field
Escape closes the pause question with the workflow still on

Motion

The ring travels from step to step (the flowchart's own). In a test run each step turns Running and then decides, one after another, and the path not taken turns Skipped; the run settles and nothing moves after. The matching count in a condition rolls as rules change. The tab counts roll. Reduced motion: the test still goes step by step (it carries information), with no travel.

Props

Prop	Type	Default	Description
`workflow / defaultWorkflow / onWorkflowChange`	`Workflow`	—	{ id, name, draft, published, version, enabled, paused? }: what is edited (draft) and what runs (published, null before the first publish).
`events` (required)	`WorkflowEvent[]`	—	What can start a workflow, each with the fields its conditions can test: { id, label, description?, fields: QueryField[], noun? }.
`actions` (required)	`WorkflowActionType[]`	—	What a step can do: { id, label, icon?, params: { id, label, options?, placeholder? }[], describe(params) }.
`samples`	`WorkflowSample[]`	—	Records for a test run; without them there is no Test run.
`runs`	`WorkflowRun[] \| null`	—	Past runs, newest first; null while loading.
`countMatches`	`(eventId, query) => number \| null`	—	How many recent records a condition matches; null while counting.
`countNoun`	`[string, string]`	—	What countMatches counts. Default the event's noun.
`onPublish`	`(workflow: Workflow) => Promise<void> \| void`	—	Shows Publish; a rejection keeps the draft and says why.
`onEnabledChange`	`(enabled: boolean, reason: string \| null) => Promise<void> \| void`	—	Turning off asks for a reason first; a rejection puts the switch back and says why.
`onRetryRun`	`(runId: string) => void \| Promise<void>`	—
`pauseReasons`	`string[]`	—	Reasons offered when turning it off; Other (with a note) always follows.
`user`	`string`	`"You"`	Who is signed in, for the pause record.
`tab / defaultTab / onTabChange`	`"build" \| "runs" \| "changes"`	—
`selected / defaultSelected / onSelectedChange`	`string \| null`	—	The step in the editor.
`workflows / onOpenWorkflow`	`{ id, name, state: "live" \| "paused" \| "draft" }[] / (id) => void`	—	The automations listed in the navigation.
`workspace / nav / defaultSidebarOpen`	`string / AppShellNavGroup[] / boolean`	—
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—	className: Classes on the documented visual root; no override by default. style: Inline styles on the documented visual root; no overrides by default. ref: Receives the documented native target or imperative handle; omitted by default.
`workflow`	`Workflow`	—
`defaultWorkflow`	`Workflow`	—
`onWorkflowChange`	`((workflow: Workflow) => void)`	—
`tab`	`WorkflowTab`	—
`defaultTab`	`WorkflowTab`	—
`onTabChange`	`((tab: WorkflowTab) => void)`	—
`selected`	`string \| null`	—	The step in the editor.
`defaultSelected`	`string \| null`	—
`onSelectedChange`	`((id: string \| null) => void)`	—
`workflows`	`{ id: string; name: string; state: "live" \| "draft" \| "paused"; }[]`	—
`onOpenWorkflow`	`((id: string) => void)`	—
`workspace`	`string`	—
`nav`	`SidebarNavGroup[]`	—
`defaultSidebarOpen`	`boolean`	—
`className`	`string`	—
`style`	`CSSProperties`	—
`ref`	`Ref<HTMLDivElement>`	—

Built from

app-shell
flowchart
query-builder
inline-edit
switch
popover
radio-group
textarea
tabs
select
number-field
input
dropdown-menu
confirm-morph
button
badge
alert
tracker
data-grid
json-viewer
json-diff-viewer
empty-state
spinner

Dependencies

lucide-react

Import

import { WorkflowBuilder } from "@beamline/workflow-builder";

Get it

Workflow builder is part of Beamline: 200+ components and 50+ complete screens for React, installed as local code in your repo. Your app never depends on Beamline servers at runtime. Build your own style from any look with public tokens, your fonts, radii, density and motion; custom style files stay in your app. Use local kit tools or let your coding agent find and install parts through the optional hosted MCP server. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent