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.
Don't know every corner of your codebase? Find any component faster than ever.
Click on component ➡️ change code ➡️ check changes ➡️ and repeat by clicking on another component 🔁
Select your framework
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.
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.
Check and follow our Twitter account.
Get more info on other sites.
LocatorJS is a Chrome Extension that lets me click on a component that I see on my locally running app and open its code in my VSCode. With just one simple click.
I am a full-stack/React dev, and I like to explore and build various dev tooling to improve my productivity. Recently, I was trying to solve one simple problem