Pointr

Hold Alt and click any card, button or text in your running app, and VS Code opens the exact code lines that render it. It also shows everything that element depends on: hooks, API services, API routes, types and utilities. It works like Flutter's "Select Widget" mode, for React and Next.js.

One install. No npm package, no config, no changes to your project.

◎ Revenue Card                          Selected UI element
└─ RevenueCard.tsx       Client component  · L23–42
   ├─ useRevenue.ts      Custom hook       · L7–16     · used in RevenueCard.tsx:24
   │  └─ revenue.service.ts  API service   · L3–7      · used in useRevenue.ts:12
   │     └─ route.ts     API route         · GET L3–18 · called from revenue.service.ts:4
   ├─ revenue.types.ts   Types             · L1–8
   └─ formatCurrency.ts  Utility           · L1–3      · used in RevenueCard.tsx:14, :34

How to use

1. Start your app as usual, for example npm run dev.
2. Open your project folder in VS Code.
3. Open the Pointr panel (</> icon in the left bar) and press Open App with Pointr. You can also run that command from the Command Palette. Your running app is detected automatically. Choose to open it in your browser or inside VS Code.
4. Hold Alt (Option on Mac) and click anything. VS Code jumps to the exact lines.

What you get:

• Editor: the clicked element's lines, highlighted.
• Pointr panel: the relationship tree. Click a file to open its exact definition, or "used in file:line" to jump to the calling line. Hover any item for a code preview.
• Relationship Map: the same tree as a visual panel, with filter chips by role.
• Show all related code: one read-only tab with every relevant definition, and a Ctrl/Cmd+Click link to each real line.

Works with

React apps running in development mode: Next.js (App Router and Pages, Turbopack or webpack), Vite + React, Create React App, Remix and similar. It supports React 18 and React 19, and both client and server components.

How it works

• When you press Open App with Pointr, the extension starts a small pass-through on 127.0.0.1 (your computer only) in front of your dev server.
• It forwards everything unchanged, including live reload, and adds one small overlay script to each page as it loads.
• React's development build already records where each element was created. When you click, the extension maps that through your dev server's own source maps to the exact file and line.

Privacy & security

• Nothing leaves your computer. No telemetry and no internet requests. The only traffic is between your browser, the local pass-through and your local dev server.
• Nothing is saved. No files, settings, caches or logs, and nothing is added to your project. Results live in memory only.
• Nothing runs until you ask. No port is opened until you press Open App, and Stop closes everything.
• Logins stay private. Passwords, cookies, tokens and login headers pass straight through to your own app. Pointr never reads, logs or stores them, and adds no headers of its own.
• No user data touched. Only React's code positions and component names are used, never page text, form values, cookies, API data or the page address.
• Typing is never interrupted. Shortcuts are ignored while you type in a field, and Alt+click never submits a form.
• Locked down:
  • It listens only on 127.0.0.1 and forwards only to localhost apps.
  • Host and Origin are checked, and every click needs a new random token.
  • Cross-site requests are refused.
  • Files must be inside the folder open in VS Code.
  • There are size and rate limits.
• Trusted workspaces only. It is disabled in Restricted Mode.

Settings

Known limits

• React only, dev mode only. Production builds don't contain React's debug information.
• Open the app with the extension's button: the overlay is only added to pages that load through it.
• Apps with a very strict nonce-only Content Security Policy may block the overlay script.
• File roles (hook, service, types…) are a best guess from file names, folders and content.