Click on a component to go to its code

A React dev tool that lets you click on any component in the browser to open its code in your IDE.

Try it here and now:

Hold Alt and move with cursor around this page.

Speed up your 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 custom config, get more info here.

All supported browsers:

Chrome Edge Brave Opera Firefox

Two projects, one core.

LocatorJS comes in two variants. So which variant to choose?

Good to start with

Good for individuals

Browser Extension

Easy to setup

No need to modify build steps

Get Chrome Extension

Good for teams

Library / Devstack plugin

Setup once for whole team

Works in all browsers

More precise targeting

Go To Setup Instruction

Contribute

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

GitHub repo GitHub Issues

Get updated

Check and follow our Twitter account.

Check our Twitter profile

Get more info on other sites.

Introducing LocatorJS: Click on React Component to get to its code.

by Michael Musil on Dev.to

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.

How I increased my React development productivity by “8%?”

by Michael Musil on Medium

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