LocatorJS logo
background

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:
ChromeEdgeBraveOperaFirefox

Setup

Select your framework

React

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

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
SolidJS

SolidJS

See instructions
Preact

Preact

See instructions
Svelte

Svelte
experimental

See instructions
Vue

Vue
experimental

See instructions

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 repoGitHub Issues

Get updated

Check and follow our Twitter account.

Check our Twitter profile

Read more

Get more info on other sites.

content

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.

content

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