domscribe
starsforks
How to install domscribe?
patchorbit/domscribe
$git clone https://github.com/patchorbit/domscribeDomscribe is a pixel-to-code development tool that bridges the gap between running web applications and their source code.
README.md
| 1 | <p align="center"> |
| 2 | <img src="./docs/logo.png" alt="Domscribe" width="200" /> |
| 3 | </p> |
| 4 | |
| 5 | <h1 align="center">Domscribe</h1> |
| 6 | |
| 7 | <p align="center"> |
| 8 | <a href="https://www.npmjs.com/search?q=%40domscribe"><img src="https://img.shields.io/npm/v/%40domscribe/core?label=npm&color=cb3837" alt="npm version" /></a> |
| 9 | <a href="https://github.com/patchorbit/domscribe/actions"><img src="https://img.shields.io/github/actions/workflow/status/patchorbit/domscribe/ci.yml?label=CI" alt="CI status" /></a> |
| 10 | <a href="#"><img src="https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/Narrator/1bedc40fc56874758abd3b7caf4d6748/raw/domscribe-coverage.json" alt="test coverage" /></a> |
| 11 | <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT license" /></a> |
| 12 | <img src="https://img.shields.io/badge/TypeScript-5.x-3178c6?logo=typescript&logoColor=white" alt="TypeScript" /> |
| 13 | <img src="https://img.shields.io/badge/node-%3E%3D18-417e38?logo=node.js&logoColor=white" alt="Node.js >= 18" /> |
| 14 | <a href="https://github.com/patchorbit/domscribe/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen" alt="PRs welcome" /></a> |
| 15 | </p> |
| 16 | |
| 17 | <p align="center"> |
| 18 | <a href="https://www.npmjs.com/package/@domscribe/react"><img src="https://img.shields.io/badge/React-61DAFB?style=flat&logo=react&logoColor=black" alt="React" /></a> |
| 19 | <a href="https://www.npmjs.com/package/@domscribe/vue"><img src="https://img.shields.io/badge/Vue-4FC08D?style=flat&logo=vuedotjs&logoColor=white" alt="Vue" /></a> |
| 20 | <a href="https://www.npmjs.com/package/@domscribe/next"><img src="https://img.shields.io/badge/Next.js-000000?style=flat&logo=nextdotjs&logoColor=white" alt="Next.js" /></a> |
| 21 | <a href="https://www.npmjs.com/package/@domscribe/nuxt"><img src="https://img.shields.io/badge/Nuxt-00DC82?style=flat&logo=nuxt&logoColor=white" alt="Nuxt" /></a> |
| 22 | |
| 23 | <a href="https://www.npmjs.com/package/@domscribe/transform"><img src="https://img.shields.io/badge/Vite-646CFF?style=flat&logo=vite&logoColor=white" alt="Vite" /></a> |
| 24 | <a href="https://www.npmjs.com/package/@domscribe/transform"><img src="https://img.shields.io/badge/Webpack-8DD6F9?style=flat&logo=webpack&logoColor=black" alt="Webpack" /></a> |
| 25 | <a href="https://www.npmjs.com/package/@domscribe/transform"><img src="https://img.shields.io/badge/Turbopack-000000?style=flat&logo=turborepo&logoColor=white" alt="Turbopack" /></a> |
| 26 | </p> |
| 27 | |
| 28 | <p align="center"> |
| 29 | <img src="https://img.shields.io/badge/Claude_Code-d97706?style=flat&logo=anthropic&logoColor=white" alt="Claude Code" /> |
| 30 | <img src="https://img.shields.io/badge/GitHub_Copilot-000?style=flat&logo=githubcopilot&logoColor=white" alt="GitHub Copilot" /> |
| 31 | <a href="https://cursor.directory/plugins/domscribe"><img src="https://img.shields.io/badge/Cursor-000?style=flat&logo=cursor&logoColor=white" alt="Cursor" /></a> |
| 32 | <a href="https://geminicli.com/extensions/?name=patchorbitdomscribe"><img src="https://img.shields.io/badge/Gemini-4285F4?style=flat&logo=googlegemini&logoColor=white" alt="Gemini" /></a> |
| 33 | <img src="https://img.shields.io/badge/Kiro-a855f7?style=flat&logoColor=white" alt="Kiro" /> |
| 34 | </p> |
| 35 | |
| 36 | <p align="center"> |
| 37 | <a href="https://domscribe.com"><img src="./docs/demo.gif" alt="Domscribe demo — click an element, capture context, resolve to source" /></a> |
| 38 | </p> |
| 39 | |
| 40 | --- |
| 41 | |
| 42 | **AI coding agents edit your source files blind — they can't see your running frontend, and your frontend can't tell them where to look.** |
| 43 | |
| 44 | Domscribe bridges both directions: click a DOM element to tell your agent what to change, or let your agent query any source location to see exactly what it looks like live in the browser. Build-time stable IDs, deep runtime context (props, state, DOM), framework-agnostic, any MCP-compatible agent. Zero production impact. |
| 45 | |
| 46 | --- |
| 47 | |
| 48 | ## Getting Started |
| 49 | |
| 50 | ```bash |
| 51 | npx domscribe init |
| 52 | ``` |
| 53 | |
| 54 | The setup wizard walks you through two steps: |
| 55 | |
| 56 | 1. **Connect your coding agent** — select your agent (Claude Code, Copilot, Gemini, Kiro, or others) and the wizard installs the plugin automatically. |
| 57 | 2. **Add to your app** — select your framework and bundler, the wizard installs the right package and shows you the config snippet to add. |
| 58 | |
| 59 | That's it. Start your dev server and you're ready to go. |
| 60 | |
| 61 | > Prefer to set things up manually, or need finer control? See the [manual setup](#manual-setup) instructions below. |
| 62 | |
| 63 | --- |
| 64 | |
| 65 | ## Features |
| 66 | |
| 67 | ### Code → UI: Let the agent see the browser |
| 68 | |
| 69 | 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. |
| 70 | |
| 71 | <p align="center"> |
| 72 | <img src="./docs/code-to-ui.png" alt="Code → UI: Let the agent see the browser" width="900" /> |
| 73 | </p> |
| 74 | |
| 75 | > [!TIP] |
| 76 | > Agents don't spontaneously query runtime state — prompt them explicitly: |
| 77 | > _"Fix the button color — use domscribe to check what CSS classes it has before changing anything."_ |
| 78 | > Your dev server must be running |
People who liked this also viewed
6 picksType
- Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like CursorMCP ServersJul 2026
- sunnysideFigma-Context-MCPA comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.MCP ServersApr 2026
- figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.MCP ServersJul 2026
- dcc-mcp-coreCore runtime and shared tooling for DCC-MCP: safe, skill-first MCP integration across Maya, Blender, Houdini, Photoshop, and custom DCC hosts.MCP ServersJul 2026
- godot-aiProduction-grade MCP server and AI tools for the Godot engine. A Snap to install. Totally free and fun.MCP ServersJul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverMCP ServersJul 2026
