aidenybai

aidenybai / element-source

Public

Get the source file location of any DOM element. Works with React, Vue, Svelte, Solid

element-source.com element-source react solid source svelte
115
2
100% credibility
Found Mar 13, 2026 at 71 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

element-source is a JavaScript library that determines the source code location, component name, and stack trace for any DOM element in applications built with React, Vue, Svelte, or Solid.

How It Works

1
🕵️ Discover the tool

You stumble upon a clever helper that reveals exactly where any piece of your webpage originates in your code files.

2
📱 Explore the demo

You visit the project page and see a live example where hovering over page elements highlights their code locations instantly.

3
➕ Add to your project

You bring this simple helper into your web project so it can start tracking element origins.

4
🌟 Select any element

On your live webpage, you pick a button, image, or text box that catches your eye.

5
🔍 Get the details

The helper quickly tells you the exact file name, line number, and component that created it.

🎉 Jump to your code

You open your code editor right at that spot, understand everything, and make fixes or improvements effortlessly.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 71 to 115 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is element-source?

Element-source is a TypeScript library that reveals the source file location, line, column, component name, and full stack for any DOM element. Pass an element to `resolveElementInfo` or `resolveSource` and get precise file paths like "src/App.tsx:42:10" instantly, no devtools required. It solves the pain of tracing rendered DOM back to framework source code in React, Vue, Svelte, or Solid apps, perfect for tools needing element source code positions.

Why is it gaining traction?

Unlike manual stack parsing or framework-specific hacks, it unifies resolution across major frameworks with a single API, delivering clean stacks formatted like "in App (at src/App.tsx:42:10)". Devs dig the agent-friendly output for GitHub Copilot prompts or file location lookups, plus utilities like `formatStack` for readable traces. Its open source design and demo site make testing element source a breeze, standing out in browser extension or debugging workflows.

Who should use this?

Frontend devs building inspector tools, browser extensions, or AI agents that select DOM elements and need file locations for GitHub Copilot instructions. Ideal for React Grab-style apps feeding element source to coding agents, or debugging file location not found issues in production. Skip if you're just tracing Chrome bookmarks or Excel file location formulas.

Verdict

Grab it for prototypes or agent experiments—docs and API are solid despite 10 stars and 1.0% credibility signaling early maturity. Test thoroughly; lacks battle-tested scale but delivers on core promises for cross-framework element source. (187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.