# Visual builder and recorder: Click through it once. It becomes a program.

Record the task in a live Kaabist browser, pick the data you want, and edit the steps and the JSON side by side. Test any step against the real site before you publish. No agent and no code needed, and nothing hidden when you want them.

## Step by step

1. **Start the way you like** A blank program, a URL and a first field, a JSON file you have, or a recording.
2. **Record in a live browser** Click through the site in a live Kaabist browser. Each action becomes a step; a password becomes a secret input.
3. **Pick the data** Point at a value to pick it. Select similar turns one row into the whole list.
4. **Steps and JSON, in step** The step list and the JSON are one program. Edit either; the other follows.
5. **Test it on the real site** Run one step, or up to here, or replay a stored page. A dry run stops before any submit.
6. **Publish a version** Each publish is a version with a diff. Move an alias to roll out, or back.

## Record, don’t write

The recorder watches what you do in the live browser: it saves each click and field as a step with several locators to fall back on, turns password values into secret inputs, suggests a wait for a one-time code, and proposes checks that the page looks right.

```
goto     portal.example.com/login
fill     Email      ← inputs.email
fill     Password   ← inputs.password (secret)
click    Sign in
await    one-time code (hosted page)
extract  invoices[] · invoice, total (money)
```

## Pick data like a person

Hover to highlight, click to pick. Select similar builds a list from one example, you can move to a parent or child element, and Ctrl-click freezes a menu that only shows on hover. On a stored page, the snapshot picker builds the fields without running the site again.

```
"invoices": {
  "selector": "tbody tr", "many": true,
  "fields": {
    "invoice": "td:nth-child(1)",
    "total": { "selector": "td.total", "type": "money" }
  }
}
```

## Three control nodes, not a canvas

A program stays a readable list: when for a condition, loop until for a repeat, paginate for the next page. The same JSON goes to the API, the CLI and your agent, so a program built here can be pulled into git and pushed back.

```
$ kaab programs pull supplier-invoices
$ kaab programs diff supplier-invoices.json
$ kaab programs push supplier-invoices.json
```

## Questions

### Do I need to write code?

No. Record the task, pick the data, test it and publish. The JSON is there when you want to read or change it.

### Can I mix the builder with my coding agent or the CLI?

Yes. They all edit the same program. Your agent can draft it, you can fix a step in the builder, and a teammate can push the next version from git.

### Where do passwords go?

Never into the program. A password you type while recording becomes a secret input, given at run time and kept out of logs, snapshots and screenshots.