Workflow Automation Builder

A Zapier-style automation: webhook trigger, filter, transform and a Slack notification.

Drag nodes, pan and zoom — this is a live React Flow canvas.

How it works

Triggers, conditions and actions are nodes with typed handles, so only compatible steps can connect. The serialised graph executes on the backend in topological order.

Source code

tsx

const onConnect = (conn) =>
  setEdges((eds) => addEdge({ ...conn, animated: true }, eds));

const isValidConnection = (conn) =>
  outputType(conn.source) === inputType(conn.target);