https://github.com/jooherrera/element-identifier
Universal Web Component to identify DOM elements and communicate better with AI. Click any element, get its unique identifier, and tell AI exactly what to modify. Compatible with React, Vue, Angular, and Vanilla JS. Zero dependencies.
https://github.com/jooherrera/element-identifier
Last synced: 25 days ago
JSON representation
Universal Web Component to identify DOM elements and communicate better with AI. Click any element, get its unique identifier, and tell AI exactly what to modify. Compatible with React, Vue, Angular, and Vanilla JS. Zero dependencies.
- Host: GitHub
- URL: https://github.com/jooherrera/element-identifier
- Owner: jooherrera
- License: mit
- Created: 2025-08-16T00:33:15.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2025-08-17T20:16:36.000Z (2 months ago)
- Last Synced: 2025-09-22T15:26:06.361Z (about 1 month ago)
- Language: TypeScript
- Size: 397 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - element-identifier - Create reliable, distinct CSS selectors to target DOM elements, and utilize a web component for visual inspection and selection. (Development Utilities / Styling)
- fucking-awesome-angular - element-identifier - Create reliable, distinct CSS selectors to target DOM elements, and utilize a web component for visual inspection and selection. (Development Utilities / Styling)
README
# element-identifier
version: 1.0.2
Generate stable, unique CSS selectors to identify DOM elements — and use a Web Component to inspect and pick them visually.
## How to use (CDN + Web Component)
1) Add the script tag (ESM) to your HTML (head or before):
- CDN : https://cdn.jsdelivr.net/npm/element-identifier/dist/index.esm.js
```html
```
2) Place the Web Component tag anywhere in the page:
```html
```
That’s it. Load the page and you’ll see a floating button (wheel). Activate it to hover and click elements; the panel will show the selector and details.
### Optional attributes (no JavaScript needed)
Use attributes on the tag to control behavior:
```html
```
- active: true | false (default false) — start activated.
- show-wheel: true | false (default true) — show the floating button (wheel).
- show-panel: true | false (default true) — allow the info panel.
- auto-start: alias for active.
### Notes
- If you don’t see the button, verify the CDN script loaded and no blockers prevented it.
- You can toggle the tool from the on-screen controls. No additional JS is required for basic use.
### Recommendation: use data-component
For more stable, human- and tool-friendly selectors, add a data-component attribute to your component root or key nodes (e.g., product card, image, or button).
Example:
```html
Add to cart
```
## React usage (Example)
If you use React, you can load the Web Component dynamically to ensure the custom element is defined before rendering it.
```tsx
import {useEffect} from "react";
declare global {
namespace JSX {
interface IntrinsicElements {
'element-identifier': {
active?: string;
'show-wheel'?: string;
'show-panel'?: string;
};
}
}
}
export default function Home() {
useEffect(() => {
import('element-identifier');
}, []);
return (
);
}
```
- The dynamic import registers the custom element (``) in the browser when the component mounts.
- You can then use the tag directly in your JSX with the optional attributes.
### Screenshot
