Welcome to PhantomStream: what it is and how to use it

[LakshmanTurlapati]

What it is

PhantomStream is DOM native live browser mirroring. It streams a real browser tab to a remote viewer as structured DOM data instead of pixels: one style inlined snapshot, then tiny MutationObserver diffs addressed by stable node IDs. The viewer rebuilds the page inside a sandboxed iframe and applies each diff by id, so it holds a live, semantically addressable, remotely controllable copy of the page at a fraction of the bandwidth of screen streaming. Because the mirror is a real DOM, you can query it, highlight a node, annotate it, and drive it back by element identity instead of guessing pixel coordinates.

Where it came from

PhantomStream was originally built inside FSB (Full Self-Browsing) as milestone v0.9.9.1, where it powers the dashboard live preview of automated browsing sessions. This repository turns that work into three things at once: a standalone plug and play framework for anything that needs a live view into a browser it controls, an SDK that FSB can plug back in, and the working repository for an accompanying research paper on DOM native mirroring for agentic browsing.

How it can be used

Any case that needs a live, trustworthy, low bandwidth view into a browser you control:

• Supervising an AI agent that drives a browser, with semantic handles that answer which element the agent is touching.
• Remote pair browsing and co browsing, where a viewer follows along and can take control.
• Live previews and dashboards of automated sessions.
• Support, demo, and teaching scenarios where exact text and reliable remote control matter more than a video feed.

How people use it

Install from npm:

npm install @full-self-browsing/phantom-stream

It is a four stage pipeline with one import per stage. Capture runs in the page and emits a snapshot then diffs, a relay fans messages between the source and any number of viewers, and the viewer rebuilds and applies them. Remote control runs the same path in reverse. There are ready made adapters for Playwright and CDP, and demos you can run straight from the repo:

npm run demo              # two tab demo: a source tab mirrored in a viewer tab
npm run demo:playwright   # Playwright drives a page while a viewer mirrors it
npm run example:loopback  # one page mirrors itself in place

See the README for the quickstarts, and the architecture and security docs for the full pipeline and the embed security contract.

Try it and weigh in

Clone the repo and run npm run demo for a two tab mirror, or npm run demo:playwright to watch a Playwright driven page mirror live. Questions, ideas, and use cases are welcome here.