Visual Live Recorder

🔴 Visual Live Recorder

The Visual Live Recorder allows you to record real user actions in Google Chrome with an in-page floating HUD toolbar. It converts your clicks, form submissions, data extractions, and assertions into clean, declarative JSON workflows.

🚀 Starting a Recording Session

Start a visual recording from the command line:

bun record workflows/my-workflow.json https://news.ycombinator.com

Or choose 🔴 Record New Workflow from the Interactive Studio.

🪟 In-Page Floating HUD

When Chrome opens, a floating toolbar appears at the top of the browser window:

┌──────────────────────────────────────────────────────────────────────────┐
│ ⠿  REC 4  Pause  Add step ▾  Capture ▾  Config 4  Undo  Finish  ◀ │
└──────────────────────────────────────────────────────────────────────────┘

The compact toolbar groups less frequent controls into Add step and Capture menus. Only one menu stays open at a time; click outside or press Escape to close it. The status badge can also be focused and activated with Enter or Space to pause/resume recording.

HUD Controls & Actions

Control	Mouse / Shortcut	Description
Normal Click	Left Click on any element	Records a resilient click step using human-visible text, aria labels, or role selectors.
Input / Type	Type into any input or textarea	Automatically records typing with placeholder and label association.
Add step ▾ → Extract value	`Shift + Click` or use the menu	Prompts for a variable name and extracts the element’s text into that variable.
Add step ▾ → Extract list	Select one repeated element	Detects sibling cards/table rows and extracts all rows into structured JSON.
Add step ▾ → Assert element	`Alt + Click` or use the menu	Adds a strict, contains, or regex assertion.
Add step ▾ → Wait	Open the Insert step panel	Adds a delay or a selector/text wait. Use Target to pick an element from the page, including a same-session frame, and `Escape` to cancel targeting.
Capture ▾ → Screenshot	Select the menu item	Adds a viewport or full-page screenshot step.
Capture ▾ → Virtual camera	Select the menu item	Configures a local video, remote stream, or generated test feed.
Config Drawer	Click the sliders icon	Opens the Steps, Variables, JSON, and Insert step tabs.
⏸️ Pause / Resume	Click HUD button	Temporarily pauses recording so you can solve CAPTCHAs, 2FA, or log in without recording junk steps.
↩ Undo Step	Click HUD button	Removes the last recorded step.
🛑 Finish & Save	Click HUD button	Saves the workflow to your JSON file and cleanly exits Chrome.

⚙️ Live In-Page Config Drawer

Clicking ⚙️ Config opens a live slide-out drawer inside Chrome where you can:

View the complete JSON workflow definition as it builds.
Delete individual steps with a single click.
Reorder steps.
Inspect and manage extracted variables.
Insert wait, wait-for-element, navigation, and JavaScript evaluation steps.

⌨️ Terminal Hotkeys During Recording

While the Chrome browser is open, you can also control the recording session directly from your terminal:

Key	Command	Description
`c` or `config`	View Config	Prints the live formatted JSON workflow in the terminal.
`s` or `steps`	View Steps	Displays a numbered list of all recorded steps.
`w <ms>`	Add Delay	Injects a wait step (e.g. `w 2000` for 2 seconds).
`u` or `undo`	Undo Step	Reverts the last recorded action.
`d <index>`	Delete Step	Deletes a specific step by its index (e.g. `d 2`).
`v <key>=<val>`	Set Variable	Adds or updates a workflow variable (e.g. `v email=user@test.com`).
`p` or `pause`	Pause / Resume	Toggles pause state for entering credentials or CAPTCHAs.
`f` or `[Enter]`	Finish & Save	Finalizes the workflow, writes to disk, and closes Chrome.

💡 Best Practices for Recording

Use Human-Centric Elements: Click text, buttons, and links naturally — the recorder creates resilient text locators automatically.
Pause for Auth & CAPTCHAs: Use ⏸️ Pause before entering sensitive one-time credentials or completing CAPTCHA puzzles, then Resume when on the target page.
Extract Lists with One Click: When extracting items from a catalog, search results, or table, click 📊 List on just one card to let the smart algorithm capture all sibling items.