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

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 slowFramework 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

// vite.config.ts
import pinfix from '@pinfix/plugin/vite'

export default defineConfig({
  plugins: [pinfix()],
})

Webpack

// webpack.config.js
import pinfix from '@pinfix/plugin/webpack'

export default {
  plugins: [pinfix()],
}

Rspack / Rsbuild

// 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 injectdata-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
})

• 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