Features

Domscribe bridges AI coding agents and your running frontend in both directions. Here is an overview of the key features.

Bidirectional Source-DOM Linking

Code to UI

Your agent calls domscribe.query.bySource with a file path and line number and gets back the live DOM snapshot, current props, component state, and rendered attributes -- directly from the running browser. No human interaction needed.

UI to Code

Click any element in the browser overlay, describe the change in plain English, and submit. The agent claims the annotation, navigates to the exact file and line, and implements the change. The overlay shows the agent's response in real time.

In-Browser Tools

Overlay and Picker

Lit web components rendered in shadow DOM provide the element picker, annotation panel, and draggable tab. CSS-isolated from your application, the overlay connects to the relay via WebSocket for live updates.

Real-time Feedback

A WebSocket relay pushes agent responses to the browser overlay as they happen. See annotation status changes, context requests, and manifest updates live.

Privacy and Security

PII Redaction

Emails, phone numbers, tokens, credit card numbers, and other sensitive patterns are automatically scrubbed before any data leaves the browser. Enabled by default.

Build-time Stable IDs

The bundler plugin parses each source file via AST and injects deterministic data-ds attributes using xxhash64 hashing. These IDs are stable across HMR and fast refresh, and they map every DOM element back to its exact source location (file, line, column, component name). The mappings are recorded in .domscribe/manifest.jsonl.

Zero Production Impact

All Domscribe instrumentation -- the data-ds attributes, runtime capture, overlay, and relay server -- is stripped in production builds. This is enforced in CI so no debug code ships to users.

Framework-Agnostic

Domscribe supports React 18-19, Vue 3, Next.js 15-16, and Nuxt 3+ out of the box, with an extensible adapter interface for other frameworks. Runtime capture uses React fiber walking and Vue VNode inspection for deep props and state extraction.

Any Bundler

Works with Vite 5-7, Webpack 5, and Turbopack. The @domscribe/transform package provides parser-agnostic AST injection that plugs into any bundler's plugin system.