element docs
element is a chrome extension and a small command-line tool. hold ⌥ and click anything in your real browser, and your coding agent gets what you picked.
on this page
what it does#
you're in the browser, your agent is in the terminal. instead of describing "the second button in the card on the right", you point at it. element hands your agent the element itself:
- its selector (preferring an id or
data-testid), role, accessible name and text - the computed styles that differ from the defaults, and a trimmed copy of its html
- a screenshot cropped to the element
- the component and source file, when the page is a development build of react, vue or svelte
- a full html/css snapshot that renders the element offline, as it looks on the page
hold ⌃⌥ instead and element turns the element into a link people and agents can open. that's save & share.
quick start#
- add the extension from the chrome web store.
- install the cli:
npm i -g @elmts/cli, thenel install. - connect your agent:
el install --claude(or--opencode,--pi,--codex,--cursor,--muse). - start your agent, hold ⌥ in the browser and click something. say what to change.
the full walk-through is in install.
how it fits together#
three pieces, all on your computer:
| piece | what it does |
|---|---|
| the extension | draws the highlight, reads the element you pick, keeps track of which tab belongs to which agent session. |
| the hub | a small background program (one per user) that holds sessions, picks and screenshots. chrome talks to it through native messaging. |
el | the cli your agent and its hooks use to read picks, open tabs and take snapshots. |
picking never leaves your machine. the only things that go online are save & share uploads, signing in, and remote sessions on Pro and Max (sealed end to end). see privacy.
requirements#
- os: macos or linux (on linux, alt instead of ⌥). windows isn't supported.
- browser: any chromium browser: chrome, arc, brave, edge, opera, vivaldi, dia and others. not safari or firefox.
- node: to install the cli with npm.
- an agent: claude code, opencode, pi, codex, cursor, muse code, or anything that can run a shell command.
suggest an editprivacyterms© 2026 Randy Yu Software LLC