A fork of element-source with a built-in browser overlay for inspecting DOM elements. Drop in a single <script> tag and get a draggable, collapsible panel that shows you the source file, component name, and line number of any element you hover over. No install, no config, no build step.
https://github.com/user-attachments/assets/demo.mp4
Add the script to your page. That's it.
<script src="https://cdn.jsdelivr.net/gh/JustSuperHuman/element-source@main/packages/element-source/dist/overlay.global.js"></script>Use alongside react-scan for full dev-mode inspection. Only load in development:
import Script from "next/script";
const isDevelopment = process.env.NODE_ENV === "development";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{isDevelopment && (
<Script
async
crossOrigin="anonymous"
src="//cdn.jsdelivr.net/gh/JustSuperHuman/element-source@main/packages/element-source/dist/overlay.global.js"
strategy="afterInteractive"
/>
)}
{children}
</body>
</html>
);
}<script src="https://cdn.jsdelivr.net/gh/JustSuperHuman/element-source@main/packages/element-source/dist/overlay.global.js"></script>import "element-source/overlay";- One script tag — no npm install, no imports, no build config
- Draggable panel — move it anywhere on screen, position is remembered
- Collapse to edge — click the
xbutton or drag the panel to the left/right edge to dock it as a slim tab. Click the tab to expand - Toggle inspection — flip the switch to enable/disable element highlighting
- Hover to inspect — highlights the element under your cursor with a green border and shows its tag name, component, source file, and line number
- Click to copy — click any element while inspecting to copy its source location to your clipboard
- Console logging — toggle the
logbutton to also output element info to your browser console with collapsible details - Persistent state — enabled/disabled, panel position, dock side, and log toggle are all saved in
localStorage - Framework support — works with React, Vue, Svelte, and Solid
This is a fork of element-source which resolves source file locations for DOM elements across React, Vue, Svelte, and Solid. This fork adds a self-contained browser overlay (overlay.global.js) that bundles the entire library into a single IIFE script. It auto-initializes on page load — no API calls needed.
pnpm install
cd packages/element-source
pnpm tsupOutput: packages/element-source/dist/overlay.global.js
The full programmatic API from the original library is still available if you need it:
import { resolveElementInfo, resolveSource, resolveStack, resolveComponentName } from "element-source";
const info = await resolveElementInfo(element);
// {
// tagName: "button",
// componentName: "Counter",
// source: { filePath: "src/Counter.tsx", lineNumber: 12, columnNumber: 5, componentName: "Counter" },
// stack: [...]
// }See the original README for the full API reference.
MIT