When working on a large Next.js project, you’ve probably had this moment:

“I can see this button on the page… but which component is rendering it?”

I run into this while working on Pasalify, my Next.js-based SaaS e-commerce platform. As the project grows—with reusable storefront sections, product components, dashboards, and a website builder—finding the exact component behind an element can become annoying.

That’s where LocatorJS comes in.

LocatorJS lets you select an element directly from your browser and jump to the related React component in your code editor.

Instead of:

See UI → Search project → Trace imports → Find component → Edit

you get:

See UI → LocatorJS → Component → Edit 🚀

Simple, but incredibly useful.

What is LocatorJS?

LocatorJS is a developer tool that connects the UI you see in the browser with the source code behind it.

Imagine you see a product card, navigation menu, button, or section inside your Next.js application.

You know what you want to change, but you don’t know whether the component is inside:

components/
features/
storefront/
products/
shared/
ui/

Instead of searching through your project manually, LocatorJS can help you jump directly to the component.

Using LocatorJS in Pasalify

Here is an example from Pasalify.

A Pasalify storefront containing multiple reusable Next.js components.

Imagine I want to modify one of the product cards on this page.

Normally, I might search for some text from the card, inspect the component tree, check imports, and eventually find the correct file.

With LocatorJS, the process is much easier.

On macOS, hold:

⌥ Option

On Windows/Linux, hold:

Alt

Then hover over the element you want to locate.

📸 IMAGE 2 — LocatorJS Highlighting a Pasalify Component

LocatorJS highlighting a component directly inside the Pasalify storefront.

Once I click the highlighted element, LocatorJS can open the related component directly in my editor.

📸 IMAGE 3 — Component Opened in VS Code

Jumping directly from the Pasalify UI to the React component responsible for it.

The workflow becomes:

Pasalify UI
     ↓
LocatorJS
     ↓
ProductCard.tsx
     ↓
Edit
     ↓
Next.js Fast Refresh ⚡

That’s the main reason I like LocatorJS.

Installing LocatorJS in Next.js

The easiest way to start is by installing the LocatorJS browser extension.

For modern Next.js 15+ projects using Turbopack/SWC, install the LocatorJS loader:

npm install -D @locator/webpack-loader

Then open your:

next.config.ts

and add:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      "**/*.{tsx,jsx}": {
        loaders: [
          {
            loader: "@locator/webpack-loader",
            options: {
              env: "development",
            },
          },
        ],
      },
    },
  },
};

export default nextConfig;

Restart your development server:

npm run dev

And that’s basically it.

Now open your Next.js application in the browser, hold Option/Alt, hover over a component, and try selecting it.

Using LocatorJS with Webpack

If your Next.js project uses Webpack instead of Turbopack, you can configure it like this:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.module.rules.push({
        test: /\.(tsx|ts|jsx|js)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "@locator/webpack-loader",
            options: {
              env: "development",
            },
          },
        ],
      });
    }

    return config;
  },
};

Want LocatorJS Inside Your Project?

Instead of only using the browser extension, you can also install the LocatorJS runtime:

npm install -D @locator/runtime

Then initialize it during development:

import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI();
}

This can be useful when you want LocatorJS available as part of the development setup for your team.

Why Not Just Use Browser DevTools?

Browser DevTools are still essential.

I use DevTools for things like CSS debugging, network requests, console errors, responsive layouts, DOM inspection, and performance.

LocatorJS solves a different problem:

“Where is this UI element in my source code?”

So LocatorJS doesn’t replace DevTools.

They actually work really well together:

DevTools + LocatorJS + VS Code + Next.js ⚡

Before vs After

Without LocatorJS:

UI
 ↓
Inspect
 ↓
Search text
 ↓
Search folders
 ↓
Trace imports
 ↓
Find component 😩

With LocatorJS:

UI → Option/Alt → Click → Component 🚀

When you’re working on a component-heavy project, those few saved seconds can add up quickly.

Keep It Development-Only

LocatorJS is a developer tool, so you usually don’t need it in production.

That’s why the configuration uses:

options: {
  env: "development"
}

It improves the developer experience, not the experience of your website visitors.

Final Thoughts

LocatorJS doesn’t make your Next.js application faster. It doesn’t improve SEO. And it won’t magically fix your bugs. What it does is remove one small but very common frustration:

finding the code behind the UI.

Instead of asking:

Where is this component? 🤔

you can simply:

Hover → Click → Code 🚀

If you regularly work with React or Next.js, especially on larger projects, LocatorJS is definitely worth trying.

Sometimes the best developer tools aren’t the ones solving huge problems.

They’re the ones that remove the small annoyances we deal with every day.