Click on a component to go to its code

Click on any component in the browser to open its code in your IDE.
You can use it as a browser extension or as a library.
For React, Preact, Solid, Vue and Svelte.

Speed up your web development

Find anything faster

Don't know every corner of your codebase? Find any component faster than ever.


Speed up your daily workflow.

Click on component ➡️ change code ➡️ check changes ➡️ and repeat by clicking on another component 🔁

Get browser extension

Works out of the box with most React dev stacks like Vite, Next.js, or Create React App.
For other frameworks or custom config get more info here.

All supported browsers:


Select your framework


React (data-id approach)

Compared to devtools approach:
Works with all React projects that use Babel.
It can be used also in production-like environments.
Contains additional support for styled-components.

See instructions

React (devtools approach)

Compared to data-id approach:
Works with modern React dev stacks like Vite, Next.js, or Create React App.
If you use the Browser extension, you don't need to install any packages.
You might need to have React DevTools to make it working properly.

See instructions


See instructions


See instructions


LocatorJS is Open source (MIT license). You can help by making a pull request by creating an issue or just by spreading the word.

Get updated

Check and follow our Twitter account.