{"id":31513808,"url":"https://github.com/jooherrera/element-identifier","last_synced_at":"2025-10-03T02:03:27.046Z","repository":{"id":310238835,"uuid":"1038858162","full_name":"jooherrera/element-identifier","owner":"jooherrera","description":"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.","archived":false,"fork":false,"pushed_at":"2025-08-17T20:16:36.000Z","size":407,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-22T15:26:06.361Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jooherrera.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-16T00:33:15.000Z","updated_at":"2025-08-17T20:16:32.000Z","dependencies_parsed_at":"2025-08-16T18:47:53.381Z","dependency_job_id":"4a60ca23-2c23-4181-8713-869becadfe4b","html_url":"https://github.com/jooherrera/element-identifier","commit_stats":null,"previous_names":["jooherrera/element-identifier"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/jooherrera/element-identifier","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jooherrera%2Felement-identifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jooherrera%2Felement-identifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jooherrera%2Felement-identifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jooherrera%2Felement-identifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jooherrera","download_url":"https://codeload.github.com/jooherrera/element-identifier/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jooherrera%2Felement-identifier/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278100044,"owners_count":25929782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-03T02:00:06.070Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-03T02:00:52.971Z","updated_at":"2025-10-03T02:03:27.029Z","avatar_url":"https://github.com/jooherrera.png","language":"TypeScript","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Styling"],"readme":"# element-identifier\nversion: 1.0.2\n\nGenerate stable, unique CSS selectors to identify DOM elements — and use a Web Component to inspect and pick them visually.\n\n## How to use (CDN + Web Component)\n\n1) Add the script tag (ESM) to your HTML (head or before):\n- CDN : https://cdn.jsdelivr.net/npm/element-identifier/dist/index.esm.js\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/element-identifier/dist/index.esm.js\"\u003e\u003c/script\u003e\n```\n\n2) Place the Web Component tag anywhere in the page:\n```html\n\u003celement-identifier\u003e\u003c/element-identifier\u003e\n```\n\nThat’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.\n\n### Optional attributes (no JavaScript needed)\nUse attributes on the tag to control behavior:\n\n```html\n\u003celement-identifier active=\"false\" show-wheel=\"true\" show-panel=\"true\"\u003e\u003c/element-identifier\u003e\n```\n\n- active: true | false (default false) — start activated.\n- show-wheel: true | false (default true) — show the floating button (wheel).\n- show-panel: true | false (default true) — allow the info panel.\n- auto-start: alias for active.\n\n### Notes\n- If you don’t see the button, verify the CDN script loaded and no blockers prevented it.\n- You can toggle the tool from the on-screen controls. No additional JS is required for basic use.\n\n### Recommendation: use data-component\nFor 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).\n\nExample:\n```html\n\u003cdiv class=\"card\" data-component=\"ProductCard\"\u003e\n  \u003cimg src=\"/img.jpg\" alt=\"...\" data-component=\"ProductImage\" /\u003e\n  \u003cbutton data-component=\"AddToCartButton\"\u003eAdd to cart\u003c/button\u003e\n\u003c/div\u003e\n```\n\n\n## React usage (Example)\nIf you use React, you can load the Web Component dynamically to ensure the custom element is defined before rendering it.\n\n```tsx\nimport {useEffect} from \"react\";\n\ndeclare global {\n    namespace JSX {\n        interface IntrinsicElements {\n            'element-identifier': {\n                active?: string;\n                'show-wheel'?: string;\n                'show-panel'?: string;\n            };\n        }\n    }\n}\n\nexport default function Home() {\n    useEffect(() =\u003e {\n        import('element-identifier');\n    }, []);\n  return (\n    \u003cmain\u003e    \n        \u003celement-identifier\n            active=\"false\"\n            show-wheel=\"true\"\n            show-panel=\"true\"\n        /\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\n- The dynamic import registers the custom element (`\u003celement-identifier\u003e`) in the browser when the component mounts.\n- You can then use the tag directly in your JSX with the optional attributes.\n\n### Screenshot\n\n![Element Identifier demo (React Counter)](examples/img.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjooherrera%2Felement-identifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjooherrera%2Felement-identifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjooherrera%2Felement-identifier/lists"}