Awwdits

About

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