Point at any element. Tell your AI what to change.
A bookmarklet that lets you visually select elements on any web page, add instructions, and copy a structured prompt — paste it into Claude Code, Codex, Cursor, or any AI coding assistant.
- Visit the install page
- Drag the Selector button to your bookmarks bar (one-time)
- Done
Open any web page, click the Selector bookmark.
| Action | What it does |
|---|---|
| Click | Select an element |
| Shift + Click | Add to selection |
| Drag | Marquee select multiple elements |
| ↑ / ↓ | Navigate to parent / child element |
| ← / → | Navigate to previous / next sibling |
| ✎ button | Add per-element instruction |
| ⌘C | Copy prompt to clipboard |
| ⌘Z | Undo last selection change |
| Space | Pause / resume selecting |
| Esc | Clear selection |
The copied prompt includes element metadata (tag, selector, text, React component info) plus any per-element instructions you added.
Page: /dashboard
1. .hero-title <h1>
selector: body > main > section > h1
source: src/components/Hero.tsx:12
react: Layout › Hero
text: "Welcome to the Dashboard"
html: <h1 class="hero-title">Welcome to the Dashboard</h1>
instruction: Make this red and larger
2. .sidebar <nav>
selector: body > aside > nav
text: "Home Settings Profile Logout"
html: <nav class="sidebar">…
instruction: Add an "Analytics" link after "Settings"
The bookmarklet injects editor.css + editor.js into the current page. Everything runs client-side — no data is sent anywhere. The code is bundled into the bookmark at install time, so it works offline after that.
git clone https://github.com/idonecc/selector.git
cd selector
# Edit assets/editor.js and assets/editor.css
# Push to main — GitHub Pages auto-deploysFork of oil-oil/selector.
MIT