{"slug": "show-hn-pinfix-click-any-ui-element-and-edit-its-source-with-claude-code", "title": "Show HN: PinFix – Click any UI element and edit its source with Claude Code", "summary": "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.", "body_md": "## preview.mp4\n\nClick 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.\n\nNo context switching. No copy-pasting file paths. Just point, describe, and see HMR apply the change.\n\nTraditional 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.\n\n**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.\n\n```\nnpm install -D @pinfix/plugin\n```\n\nAdd the plugin to your build config:\n\n**Vite**\n\n``` python\n// vite.config.ts\nimport pinfix from '@pinfix/plugin/vite'\n\nexport default defineConfig({\n  plugins: [pinfix()],\n})\n```\n\n**Webpack**\n\n``` python\n// webpack.config.js\nimport pinfix from '@pinfix/plugin/webpack'\n\nexport default {\n  plugins: [pinfix()],\n}\n```\n\n**Rspack / Rsbuild**\n\n``` python\n// rsbuild.config.ts\nimport pinfix from '@pinfix/plugin/rspack'\n\nexport default {\n  tools: {\n    rspack: { plugins: [pinfix()] },\n  },\n}\n```\n\nThen start your dev server as usual. PinFix activates automatically in development mode.\n\n- Start your dev server (\n`npm run dev`\n\n) - Press\n**Alt + Shift + Z**(Option + Shift + Z on Mac) to enter annotation mode - Hover over any component — it highlights with a blue border\n- Click to place a pin on the element\n- Type your change request, or open\n**Adjust design** to tweak layout, spacing, size, color, border, and text controls - Claude Code receives the selected source location plus your structured visual changes\n- Claude Code streams a response and edits your source code\n- HMR applies the change — see the result immediately\n- Continue the conversation for iterative refinements\n\n```\n┌─────────────────┐        WebSocket         ┌─────────────────┐       Claude Agent SDK\n│  Browser Client │  ◄──────────────────────► │  Channel Server │  ◄─────────────────────►  Claude Code\n│  (Shadow DOM)   │        port 24816         │  (auto-spawned) │\n└─────────────────┘                           └─────────────────┘\n```\n\n**Build plugin** transforms your JSX/TSX/Vue files to inject`data-pinfix-source`\n\nattributes 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.\n\n```\npinfix({\n  port: 24816, // WebSocket port (default: 24816)\n  hotkey: 'alt+shift+z', // Activation hotkey\n  fab: true, // Show floating action button\n  prompt: 'Custom system prompt...', // Additional context for Claude Code\n  escapeTags: ['Layout', 'Provider'], // Skip these wrapper components\n  match: /\\.(tsx|jsx|vue)$/, // Only transform matching files\n  exclude: /node_modules/, // Exclude from transform\n  debug: false, // Enable debug logging\n})\n```\n\n| Bundler | Import Path | Status |\n|---|---|---|\n| Vite 5+ | `@pinfix/plugin/vite` |\nStable |\n| Webpack 5 | `@pinfix/plugin/webpack` |\nStable |\n| Rspack 2 | `@pinfix/plugin/rspack` |\nStable |\n\n- Node.js 18+\n- Claude Code installed and usable on your machine\n- A dev server with HMR support\n\n```\ngit clone https://github.com/foreversc/pinfix.git\ncd pinfix\npnpm install\npnpm build\npnpm dev:vite-react   # Run the Vite + React example\n```\n\nMIT", "url": "https://wpnews.pro/news/show-hn-pinfix-click-any-ui-element-and-edit-its-source-with-claude-code", "canonical_source": "https://github.com/ForeverSc/pinfix", "published_at": "2026-07-31 13:29:58+00:00", "updated_at": "2026-07-31 13:52:40.740241+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "ai-agents"], "entities": ["PinFix", "Claude Code", "Vite", "Webpack", "Rspack", "npm"], "alternates": {"html": "https://wpnews.pro/news/show-hn-pinfix-click-any-ui-element-and-edit-its-source-with-claude-code", "markdown": "https://wpnews.pro/news/show-hn-pinfix-click-any-ui-element-and-edit-its-source-with-claude-code.md", "text": "https://wpnews.pro/news/show-hn-pinfix-click-any-ui-element-and-edit-its-source-with-claude-code.txt", "jsonld": "https://wpnews.pro/news/show-hn-pinfix-click-any-ui-element-and-edit-its-source-with-claude-code.jsonld"}}