Automation steps

A React block (a whole screen) in Beamline's CMS & media app.

An automation's trigger and its steps' options. The outline: what starts it, then each step by its key and kind, with how many unknown paths it holds (warning). The trigger: an event (after the change, or before it, said to stop the save if a step fails; on create, update, delete; in which collections, none said to never run), a schedule (five cron fields, an unreadable one said, read back as the next three times), a webhook (its address to copy, method, answer at once or after the last step), manual (which collections, shown on a record's page, the list or both, a confirmation form whose answers reach the steps) or another automation. A step: its key (how later steps read it, a taken one refused) and typed options; text options take data-chain templates with Insert data listing what the trigger, who ran it, the step before and every earlier step produced on the last run; a path the last run didn't have is flagged under its field and keeps Save off; each templated option previewed resolved against the last run, a missing value marked; never run said. Active switch, unsaved changes, Discard and Save.

Use it for

Setting what starts an automation and configuring each step with templates that read earlier data.
Checking templates against the last run before saving.

Not for

Drawing branching rules for non-technical people (workflow-builder).
Reading what each run did (automation-runs).

Anatomy

header: the tool's mark, the automation, Active
outline: the trigger and each step with unknown paths
trigger: its kind and that kind's settings, the next three times for a schedule
step: kind, key, each option with Insert data, unknown paths, the preview with the last run
footer: unknown paths or saved, Discard, Save

States

trigger event after or before, no collection; schedule readable or not; webhook answering at once or after; manual with or without a form; another automation
step with unknown paths, with a preview, never run; a taken key
saved, refused
phone: a step picker over one column
right to left: mirrored; templates stay left to right
reduced motion: through the tokens

Keyboard

Tab through the outline, the trigger's choices, each option and its Insert data menu (Enter opens it), Discard and Save

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`flow`	`Flow`	—
`defaultFlow`	`Flow`	—
`onFlowChange`	`((f: Flow) => void)`	—
`specs` (required)	`StepSpec[]`	—	What each step type takes.
`collections` (required)	`{ id: string; label: string; }[]`	—
`lastRun` (required)	`Record<string, unknown> \| null`	—	The data of the last run, keyed by $trigger, $accountability and each step's key; null when it hasn't run.
`webhookUrl` (required)	`string`	—	The webhook's address.
`onSave` (required)	`(f: Flow) => Promise<{ ok: true; } \| { refused: string; }>`	—
`now`	`string`	—	What "now" is for the schedule's next times; the moment it renders by default.
`defaultSelected`	`string`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { AutomationSteps } from "@beamline/automation-steps";

Get it

Automation steps is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent