Annotate HTML

About

Point at things on any webpage. Tell your AI agent what to change.

Annotate HTML adds a small toolbar to any page. Toggle annotation mode, click an element, type your feedback, and copy everything as clean markdown — ready to paste into Claude Code, Cursor, or any AI coding assistant.

WHAT IT DOES

• Click any element to annotate it — buttons, headings, images, containers, anything\
• Each annotation captures the selector path, CSS classes, computed styles, bounding box, and accessibility info\
• Highlight text before clicking to include the exact selection\
• Markers drop at your click position with numbered pins — hover to preview, click to edit\
• One-click copy produces structured markdown your AI agent can act on immediately\
• Rulers along the viewport edges appear on hover — drag out guide lines for alignment checks\
• Seven accent colors to match your workflow

KEYBOARD SHORTCUTS

Alt+Shift+A — Toggle toolbar (customizable in chrome://extensions/shortcuts)\
Alt+A — Toggle annotation mode\
C — Copy all annotations as markdown\
M — Open color picker\
H — Show/hide markers and rulers\
Esc — Close popup or exit mode

WHAT GETS CAPTURED

Each annotation records what an AI agent needs to find and fix the right element:

• Element name — button "Download", h2 "Features", image "hero.png"\
• Selector path — .hero > .cta > .btn-primary\
• CSS classes, bounding box, computed styles\
• Selected text (if highlighted)\
• Nearby text context from sibling elements\
• Accessibility info — role, aria-label, focusable

PRIVACY

Zero data collection. No analytics, no tracking, no network requests. Everything stays in your browser tab and disappears when you close it. Minimal permissions: activeTab and scripting only.

OPEN SOURCE

MIT licensed. Source code: github.com/AsimSayed/annotate-html