DEV Community

Cover image for I built a tool to find where React components come from — even in big Next.js projects
Olebogeng Mbedzi
Olebogeng Mbedzi

Posted on

I built a tool to find where React components come from — even in big Next.js projects

#javascript #webdev

I built a tool to find where React components come from — even in big Next.js projects

Have you ever stared at a React component in the browser and thought:

“Wait… which file does this element come from again?”

That was me, almost daily, while working on large Next.js and Vite projects.

So I built react-source-lens — a small developer tool that lets you hover over any React element and instantly see the file path and line number where it was defined.

🎯 The problem

When debugging complex React apps, you often end up in this loop:

  1. See a button, card, or modal in the browser.
  2. Open DevTools → Components tab.
  3. Try to guess which file it came from.
  4. Switch to VS Code → search → open → check.
  5. Repeat.

It’s slow, context-breaking, and frustrating — especially in large codebases with nested components.

💡 The idea

React internally stores a “Fiber tree” that connects each rendered element to its component function.

I realized that if I could read that Fiber tree and correlate it to source metadata, I could display file info right in the browser — no guessing, no searching.

So that’s what react-source-lens does.

⚙️ How it works

  • It traverses React’s internal Fiber tree to get component display names.
  • It uses optional metadata (if available) to map those components to their file paths.
  • Optionally, you can enable a lightweight Babel plugin that injects file + line info during build time for 100% accuracy.

🧠 I initially tried building an SWC plugin for Next.js, but ran into compatibility issues — so I started with Babel since it’s widely supported.

🚀 Quick start

Install it in your dev environment:

npm install react-source-lens --save-dev

Then wrap a part of your app:

import { useReactSourceLens } from "react-source-lens";

function App() {
  useReactSourceLens()
  return (
      <YourApp />
  );
}
Enter fullscreen mode Exit fullscreen mode

Hover any element in your app, press your shortcut key, and see the file path + line appear instantly ✨

🧠 Under the hood
If you’re curious, react-source-lens works without modifying React itself.
It simply walks the React Fiber tree through the DOM node references that React attaches internally (__reactFiber$...).

From there, it reconstructs the hierarchy and, when available, displays the data-source-file and data-source-line attributes injected at build time by the Babel plugin.

It’s a neat intersection of React internals and developer tooling.

💬 What’s next
I’m currently exploring:

⚡ SWC integration (for faster builds in Next.js)

🪟 Inline overlay view for file + line info

🌳 Visual tree mode for complex UIs

If that sounds useful, drop a star ⭐ on GitHub or leave a suggestion — I’m building this for the community.

🔗 Links
📦 NPM: https://www.npmjs.com/package/react-source-lens
💻 https://github.com/darula-hpp/react-source-lens

Thanks for reading! If you’d like to follow my dev experiments and open-source work, you can find me on X OlebogengMbedzi
. 🧡

Top comments (0)