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.
Three steps from idea to implementation. No context switching required.
Press Alt+Shift+Z to enter edit mode. Hover over any element — it highlights instantly. Click to place a pin.
Type what you want to change in natural language. "Make this button larger and blue" — that's it.
Claude Code edits your source code directly. HMR applies the change instantly. Continue the conversation to refine.
Everything you need for Claude Code-assisted visual development.
Crosshair mode highlights every component. Click to pin — no need to search for file paths or line numbers.
Carry on multi-turn conversations across pins. Iterate on changes through natural dialogue without losing context.
Source code edits trigger Hot Module Replacement. See changes appear in under a second, no page refresh needed.
Works with React, Vue, and any JSX/TSX component. Automatically traces source locations via build-time transforms.
One plugin line in your build config. The channel server spawns and cleans up automatically.
Completely stripped in production builds. Zero runtime overhead, no bundle size impact for your users.
Up and running in under a minute.
// 1. Install // npm install -D @pinfix/plugin // 2. Add plugin import pinfix from '@pinfix/plugin/vite' export default defineConfig({ plugins: [pinfix()] }) // 3. Start dev server and press Alt+Shift+Z
First-class support for major bundlers and frameworks.