SpotPatch — select a React UI element and jump to its exact JSX/TSX source

[huanglvjing]

Hi Vite community 👋

I built SpotPatch, a local-first, development-only feedback workspace for React applications powered by a Vite plugin.

Instead of sending a screenshot and asking a developer or coding agent to “change this part,” SpotPatch keeps the rendered UI connected to its actual source context.

What it does

1. Select one or more elements in the running React application.
2. Resolve each target to its JSX/TSX file, line, and column.
3. Inspect bounded DOM, CSS, React, and source context.
4. Open the exact location in Cursor or VS Code, or generate a structured prompt.
5. Optionally let an AI agent prepare a change in an isolated Git worktree.
6. Review the checks and diff before applying—or safely revert afterward.

It also includes a Beta data-flow inspector for viewing proven component API relationships, consumed response fields, and data destinations.

Vite integration

SpotPatch injects development-only source markers through the Vite transform pipeline and exposes its local workspace through the development server.

Production builds are tested to contain no SpotPatch Runtime, source markers, local protocol endpoints, or provider credentials.

The currently supported public integration covers Vite 5, 6, and 7 with React 18.2–18.3.

Try it

From an existing Vite + React project:

npx --yes @spotpatch/vite@latest setup

Then start the normal development server and choose Select element, or press Mod+Shift+S.

GitHub:
https://github.com/huanglvjing/spotpatch

npm:
https://www.npmjs.com/package/@spotpatch/vite

I’d especially appreciate feedback from Vite plugin authors about transform interoperability, source-position accuracy, HMR behavior, and production isolation.