Screenshots
Peacock Studio in the wild

Peacock Studio solutions for Product Owners & Managers

Peacock Studio product features - Flow Doc
The choice
Should recordings live in the cloud?
Most session tools upload clicks, screens, and keystrokes to a server. I had to decide whether Peacock Studio would do the same.
The easy option
- Build a cloud recorder so we could launch faster
- Send recordings to a server so playback could feel “smart”
- Put privacy in the terms of service, not in the product
What I chose
- Keep recordings on the user’s computer
- Keep the recorder separate from the customer’s app so it cannot break their page
- Build the capture system so new features can be added later
In short
Banks and enterprises will only use this if their data never leaves the browser. Privacy is the product — not a setting.
What I checked first
Where does the data live?
If screens and keystrokes cannot leave the browser, a cloud recorder is the wrong design.
Does it slow the customer’s app?
The recorder runs inside their product. If the page gets slow or messy, they will uninstall it.
Can we add features later?
Capture, storage, and playback should stay separate so analytics or test tools can plug in without a rewrite.
The problem
Engineering and QA teams spend hours documenting workflows, capturing regressions, and explaining processes — often with brittle screenshots and tribal knowledge that goes stale the moment the UI changes.
Most session tools also push sensitive interaction data to the cloud. For enterprise environments, that is a non-starter.
What I built
Peacock Studio is an edge-native browser application — a Chrome/Edge extension paired with a React-based platform — that automates workflow documentation, visual testing, and interactive step-by-step process playback. The extension is on the Chrome Web Store.
Recording happens entirely on the client: high-frequency interactions, DOM mutations, screenshots, and application events stay local, with automatic masking of sensitive information and zero server-side data collection.
Architecture
The product uses a closed Shadow DOM boundary, Dexie.js on IndexedDB, and browser APIs to keep capture private and performant. An event-driven recording pipeline is optimized for low memory usage so session capture does not degrade the host application.
The architecture is modular so future capabilities — test generation, workflow analytics, bug reporting, and broader developer productivity tools — can plug in without rewriting the core.
Tools chosen
- React + TypeScript — maintainable UI for a complex extension surface.
- Shadow DOM — isolate the recorder UI from host page styles and scripts.
- Dexie.js / IndexedDB — structured local storage without a backend dependency.
- Browser extension APIs — capture where work already happens: inside the browser.
Outcomes
A privacy-first foundation for documenting and replaying real product workflows — designed for engineering and QA teams that need fidelity without compromising client data.

