patchorbit/domscribe
View on GitHub ↗Domscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code.
186 ★14 forksTypeScriptUpdated 26d ago
What you need to know
Bidirectional bridge between a running frontend and coding agents - click a DOM element to tell the agent what to change, or query source locations to see live runtime state
Install
npx domscribe init
Usage
- •Let agents call domscribe.query.bySource with a file path and line to get live DOM snapshot, props and state
- •Click any element in the browser overlay and describe the change to create an annotation the agent implements
Key features
- ✓Build-time stable data-ds IDs injected via AST, stable across HMR
- ✓Deep runtime capture including live props, state and DOM snapshots
- ✓Framework-agnostic (React, Vue, Next.js, Nuxt) with Vite, Webpack and Turbopack support
- ✓Zero production impact - instrumentation stripped in production builds
- ✓PII redaction before data leaves the browser
- ✓12 MCP tools and 4 prompts for agent access
Best for
Frontend developers whose coding agents need live browser context and source-to-UI mapping
Caveats
- ⚠Dev server must be running with the target page open
- ⚠React 18-19, Vue 3, Next.js 15-16, Nuxt 3+ and Vite 5-7, Webpack 5, Turbopack required
Platforms: Local (dev server)Clients: Claude Code · GitHub Copilot · Gemini CLI · Kiro · Cursor · Any MCP client
Reviewed 2026-08-11
Topics
aiclaude-code-plugincopilot-cli-plugincursor-plugindeveloper-toolsdevtoolsgemini-cli-extensionkiro-powermcpmcp-servermodel-context-protocolnextjsnuxtreacttypescriptvitevite-pluginvuewebpackwebpack-plugin
- Stars
- 186★
- Forks
- 14
- Language
- TypeScript
- License
- MIT
- Created
- 2025-09-10
- Last push
- 2026-08-09