ComponentLocator
From the browser to your code, in one click.
A Chrome and Firefox extension for web developers: hover over your app, instantly see which component you are looking at, and open it in your editor with a simple Alt+click. It detects your framework on its own. No more hunting for files.
- Next.js
- React
- Vue
- Svelte
- Astro
- Zero configuration
- No data collected
How it works
1. Hold Alt
While your app runs locally, hold Alt and move the mouse: every element shows you the component that renders it.
2. Alt+click
The file opens in your editor, already at the right line. No folder digging, no grep.
3. Get back to building
There is nothing to configure and nothing to add to your project: install the extension and it just works.
Why you need it
How much time do you spend wondering “which file is this button in?”. On a large project, finding the right component is often slower than fixing it.
ComponentLocator removes the problem at the root: what you see in the browser becomes the front door to your code. It detects your project's framework on its own — Next.js, React, Vue, Svelte or Astro — and works with the latest versions too, where the classic tools stopped working.
Coming from another click-to-component tool?
If you have already used a click-to-component tool, you know the gesture: click an element, jump to the source. ComponentLocator is the modern alternative, built for today's stacks: it works with the latest versions of React and Next.js (App Router included) and recognizes server-rendered components too, where the classic tools stop.
Nothing to add to your project: no plugin, no dependency, no configuration. And on Windows it handles the bracketed paths of Next.js dynamic segments and route groups on its own, where the dev server protocol gives up.
One tool for Next.js, React, Vue, Svelte and Astro: the extension figures out which framework you are working with on its own.
What makes it useful
Find it instantly
From pixel to source file in one click: no more hunting for components across dozens of folders.
Zero configuration
Install and go: it hooks into the editor you have already set up for your project.
All your frameworks
It automatically recognizes Next.js, React, Vue, Svelte and Astro: one tool for every project, including the latest versions where others fall short.
Sees the server too
It recognizes server-rendered components and flags them with a dedicated label.
Total privacy
It works only on your machine, on your app in development: it collects and sends no data at all.
Your way
Prefer a different key or another editor? Pick them in two clicks from the settings.
Works with your editor
No setup: it opens files in the editor you already use. Out-of-the-box support for:
- VS Code
- Cursor
- Windsurf
- JetBrains / WebStorm
Good to know
Windows, Next.js and paths with brackets
On Windows, the Next.js dev server refuses to open files whose path contains square brackets or parentheses — that is, dynamic segments and route groups, like app/[id]/(dashboard)/page.tsx — and only reports it in its terminal. ComponentLocator works around this on its own: it recognizes the case and opens the file directly in your editor (vscode:// by default), detecting your project path automatically. If it can't, it warns you: just set the project root or a “Custom editor URL” in the settings.
Privacy
ComponentLocator runs exclusively on your machine, against your app in development: no data collected, no tracking, nothing ever leaves your browser.
Read the extension's privacy policy