Awwdits

Review any live page: comment on elements, tweak the CSS, and hand it off to a developer or an LLM as structured text.

Awwdits turns "the padding is off here" into something a developer — or a coding agent — can act on directly. Open it on any live web page with Alt+Shift+A. Hold Cmd/Ctrl and click an element to inspect it, add Shift to leave a comment, or tweak its CSS and watch every change tracked as a before/after pair. Hold X and click two elements to measure the gap between them, the way Chrome's inspector does. Then hand it off. Copy your review as structured text and paste it into a ticket, a pull request, or an LLM. Each note leads with what's needed to FIND the element — its React component and source file (Button → button.tsx:8), a text snippet, and a stable hook (data-testid / id / aria-label). Each edit RESOLVES to source: a token-backed value follows its var() chain down to the exact file and line you'd edit, instead of a leaf pixel that appears nowhere in the code. Inspect any visual too — an <img>, a CSS background, an inline <svg>, a <canvas>, or a <video>. The panel shows a preview plus dimensions, and for hosted assets, its file size and a one-click download. Everything degrades gracefully: no design tokens, no framework, or plain HTML falls back to the class selector and a plain before/after. Private by design: your comments and edits are saved locally in your browser, keyed by page URL, and never leave your device. No accounts, no analytics, no servers. Shortcuts - Alt+Shift+A — toggle Awwdits - Cmd/Ctrl + click — inspect - Cmd/Ctrl + Shift + click — comment - Hold X — measure - Escape — deselect Open source (GPL v3): https://github.com/overlyhonest/awwdits