Show HN: PinFix – Click any UI element and edit its source with Claude Code

PinFix, a new open-source developer tool, lets users click any UI element in a running app and have Claude Code automatically locate and edit the corresponding source code in real time. The tool, which supports Vite 5+, Webpack 5, and Rspack 2, injects metadata into JSX/TSX/Vue files to map visual elements to exact file, line, and column positions, enabling instant edits via a WebSocket connection. PinFix requires Node.js 18+ and Claude Code, and is available as an npm package (@pinfix/plugin) with zero configuration.

preview.mp4 Click any UI, describe what you want to change, and PinFix lets Claude Code precisely find the source code and apply the edit in real time. No context switching. No copy-pasting file paths. Just point, describe, and see HMR apply the change. Traditional Claude Code workflows require you to explain where in the codebase something needs to change. PinFix flips this — you visually select the element in the browser, and it already knows the exact source file, line, and column. Your conversation starts with full context. The page is the context — Point to what you want to change directly on the UI, no window switching, file paths, or location explanations needed Real-time edits — Claude Code updates your source files directly, and HMR shows the result instantly Visual selection — Press Alt+Shift+Z to enter crosshair mode, hover to highlight elements, and click to place a pin Design adjustment panel — Use inspector-style controls for text, layout, spacing, size, color, border, and typography changes when words alone are too slow Framework Agnostic — Works with React, Vue, Svelte, or any JSX/TSX-based framework. Zero Config — One plugin line in your build config. The channel server spawns and cleans up automatically. npm install -D @pinfix/plugin Add the plugin to your build config: Vite python // vite.config.ts import pinfix from '@pinfix/plugin/vite' export default defineConfig { plugins: pinfix , } Webpack python // webpack.config.js import pinfix from '@pinfix/plugin/webpack' export default { plugins: pinfix , } Rspack / Rsbuild python // rsbuild.config.ts import pinfix from '@pinfix/plugin/rspack' export default { tools: { rspack: { plugins: pinfix }, }, } Then start your dev server as usual. PinFix activates automatically in development mode. - Start your dev server npm run dev - Press Alt + Shift + Z Option + Shift + Z on Mac to enter annotation mode - Hover over any component — it highlights with a blue border - Click to place a pin on the element - Type your change request, or open Adjust design to tweak layout, spacing, size, color, border, and text controls - Claude Code receives the selected source location plus your structured visual changes - Claude Code streams a response and edits your source code - HMR applies the change — see the result immediately - Continue the conversation for iterative refinements ┌─────────────────┐ WebSocket ┌─────────────────┐ Claude Agent SDK │ Browser Client │ ◄──────────────────────► │ Channel Server │ ◄─────────────────────► Claude Code │ Shadow DOM │ port 24816 │ auto-spawned │ └─────────────────┘ └─────────────────┘ Build plugin transforms your JSX/TSX/Vue files to inject data-pinfix-source attributes with file path, line, and column metadata. Client overlay renders inside Shadow DOM — isolated from your app's styles. Handles pin placement, chat UI, design adjustment controls, and WebSocket communication. Channel server spawns automatically alongside your dev server. The active pin uses a workspace-level Claude Code session with full project context. pinfix { port: 24816, // WebSocket port default: 24816 hotkey: 'alt+shift+z', // Activation hotkey fab: true, // Show floating action button prompt: 'Custom system prompt...', // Additional context for Claude Code escapeTags: 'Layout', 'Provider' , // Skip these wrapper components match: /\. tsx|jsx|vue $/, // Only transform matching files exclude: /node modules/, // Exclude from transform debug: false, // Enable debug logging } | Bundler | Import Path | Status | |---|---|---| | Vite 5+ | @pinfix/plugin/vite | Stable | | Webpack 5 | @pinfix/plugin/webpack | Stable | | Rspack 2 | @pinfix/plugin/rspack | Stable | - Node.js 18+ - Claude Code installed and usable on your machine - A dev server with HMR support git clone https://github.com/foreversc/pinfix.git cd pinfix pnpm install pnpm build pnpm dev:vite-react Run the Vite + React example MIT