01
Codegen
Record clicks as code
Press Record and work in the live browser right on the page. Each click arrives in the editor as a Playwright line.
Clicks in.
Data out.
Record what you do in a browser and get Playwright code. Chain those blocks into flows that work through long lists for hours — with loops, retries and a live browser you can step into.
In action
Real app. Real runs.
Six short clips of Flow Studio at work on books.toscrape.com, a public sandbox made for scraping.
02
Codegen
Claude writes the next step
Say what comes next in plain words (⌘K). Claude reads the open page and writes the code at the cursor; one ⌘Z takes it back.
03
Codegen
Run one line, see what it finds
Select a locator and run just that line: the matches light up in the browser, and the result lists what they hold.
04
Codegen
Debug on the live page
Set a breakpoint and step: the browser waits on the current line while you read item, global and the local variables.
05
Flow
A loop through a list
A Loop sends each category through the chain while the browser shows every page — 77 books land in books.csv.
06
Flow
An error waits for you
A category that is not on the site stops that item, not the run: Retry, Skip item or Debug in Codegen — then carry on.
- Real code
- Every block is Playwright JavaScript you can read, edit, debug and export.
- Built for hours
- Delays, retries, and a run that waits for you on an error instead of failing.
- Self-hosted
- Two Docker services on your own server. Your logins and your data stay there.
Everything a browser job needs.
Two services, one workflow: Codegen builds blocks — one job on a site each — and Flow runs them as a pipeline.
-
Record to code
Click and type in the browser. Playwright code appears in the editor, line by line.
-
Pick any element
Click an element on the page and its locator —
getByRole,getByLabel,getByText— goes into the code. -
Claude writes it
Describe a step in words (⌘K). Claude sees the open page and writes the code — and fixes the block after a failed run.
-
A real debugger
Breakpoints, step, continue and local variables — on the page that is open right now.
-
Visual flows
Blocks on a canvas, joined by arrows. A Loop repeats a chain for every item of a list.
-
Data between blocks
What a block returns becomes the next one's
item;globalis shared by the whole run. Script nodes add your own JS. -
Made for long runs
Random delays, retries, pause and step node by node. On an error the run waits: retry, skip the item or debug — no restart.
-
Live browser on the page
Watch every run and sign in by hand right in the page. Logins stay in the browser profile between runs.
-
Every run on disk
A folder per run: the log, the CSV and JSON you saved, the code of every block, a screenshot of every error.
How Flow works
Blocks become a pipeline.
Flow takes the blocks you saved in Codegen and runs them as a graph: arrows set the order, a Loop repeats a chain for every item, and the data moves along the arrows.
-
01
Assemble
Pick blocks from Codegen in the side panel: a click adds a node and connects it to the last one. Script nodes hold your own JS in between.
-
02
Loop
A Loop goes through a list — typed into the node, returned by the previous block, or an expression like
global.queries. each runs per item, done gets every result. -
03
Pass data
itemis what the previous node returned.globalis one object for the whole run: counters, collected lists, settings. -
04
Run and steer
Run, Pause, Next, Resume. When a node fails, the run waits with the browser open: Retry, Skip item, or Debug in Codegen — then carry on.
-
05
Collect
Each run writes its folder as it goes: the log, your CSV and JSON, the exact code of every block, a screenshot and HTML of every error.
Clicks become code.
Codegen is where blocks are made — one job on a site each: sign in, search, collect a list. Record it in a real browser, shape the code, test it on sample data and save it for Flow.
-
01
Record
Press Record and work in the browser. Clicks, typing and choices arrive as Playwright code at the cursor.
-
02
Shape
Pick elements for locators, insert ready snippets — links, tables, loops, HTTP, CSV — or ask Claude to write a step.
-
03
Test
Give the block a sample
itemandglobal. Run it whole, or only the line under the cursor — matching elements light up in the browser. -
04
Debug
Set breakpoints, step line by line and read the variables while the page waits.
-
05
Save
Each save is a new version, and Flow always runs the latest. Any block also downloads as a standalone Node.js script.
See it on
your task.
Tell us which site and what you need from it — we'll show you Flow Studio doing it.
Book a demo [email protected]The button opens your email app with a short request ready to send — add the site and the task.