What is an @key?

An @key is a label you attach to a DOM element so FlowFn (and your workflow) can refer to it by name. There are five types:

trigger — a button or link. Clicking it fires a workflow trigger; the SDK collects all input and text @key values and sends them along.
input — a form field. Captures value (or checked for checkboxes) at fire time.
text — a read-only element. Captures rendered textContent at fire time.
js_value — captures the result of a JavaScript expression evaluated in the iframe at snapshot time.
platform_tool_action / ai_tool_action — runs a single bound platform-tool or AI action without a workflow. Clicking the bound button auto-invokes; see Action bindings.

Two ways to register a key

Inspect mode (recommended). Toggle Inspect in the preview, click any element, give it a key name and a type. FlowFn writes the right data-key attribute into your HTML for you.
Manually. Add data-key="my_key" to any element in the HTML, then add a row in the Inspector panel on the right with the same name + type.

Tag a button as a trigger @key (e.g. submit).
Open the workflow you want to fire. Add a Playground trigger, point it at the playground, and select the trigger key by name.
Define inputs on the trigger that match your input / text @keys (FlowFn auto-suggests them).
Save and publish. Now every click of that button starts a run.

You don't have to bind to a click — you can fire any registered trigger key programmatically:

flowfn.fire('submit');

The SDK collects current input values and posts them up.

const values = flowfn.snapshot();
// → { name_input: 'Alice', message_text: '...' }

flowfn.onResponse((res) => {
  if (res.error) console.error(res.error);
  else console.log('Run started:', res.workflow_run_ids);
});