Media
5 items
Description
Review any live page: comment on elements, tweak the CSS, and hand it off to a developer or an LLM as structured text. "The padding is off here" is not actionable. Awwdits turns a review into something a developer — or a coding agent — can act on directly. Open it from your browser's extensions menu on any live page. Point at what's wrong, say what's wrong, and copy the whole thing as text someone can use. What you can do • Inspect — Cmd/Ctrl-click any element for the properties worth reading. Not every property it has; the ones you came for. • Comment — pin a note to an element. It stays with that element, not with a screenshot. • Edit — change the CSS live. Every change is kept as a before and after. • Measure — hold X and click two elements for the gap between them. • Copy — the whole review as structured text, ready for a ticket, a pull request, or an LLM. What a note carries • Where the element is. Its React component and source file (Button → button.tsx:8), a text snippet, and a stable hook like data-testid, id or aria-label. • What an edit means in code. A token-backed value follows its var() chain down to the exact file and line you'd edit, instead of a pixel value that appears nowhere in the source. • Nothing invented. When awwdits can't identify something confidently, it says so rather than guessing — a note pinned confidently to the wrong element is worse than one that visibly didn't land. Hand it to a person, not just to a ticket • The text you copy carries the review inside it. Send it in Slack, in email, in a ticket — anywhere text goes. • Whoever receives it opens awwdits on that page, hits Import comments, and gets the same pins, the same threads, the same proposed CSS edits. • They reply in the thread and send it back. • It works across machines and across origins, so a review taken on staging imports onto localhost. Pasting the same review twice does nothing. • Nothing leaves your machine to make this work. The review travels in your own clipboard. Comments are conversations • An element holds a thread, not a single field. • Messages that arrived from someone else's review are marked, so your notes stay distinguishable from theirs without needing names. • A note whose element has been deleted or rebuilt still says what it was about — button · "Create new app" — and you can reply to it, or point awwdits at where the thing actually went. Reviewing a narrow layout • On a window too small to hold the panel beside the page, the panel stands down instead of covering what you're looking at — and tells you why. • Hovering, measuring and commenting keep working. • Widen the window and the panel comes back on whatever you had selected. Images, icons and video • Inspect an <img>, a CSS background, an inline <svg>, a <canvas> or a <video>. • Preview, dimensions, and for hosted assets the file size and a one-click download. Private by design • Comments and edits are saved locally in your browser, keyed by page URL. • Nothing is transmitted. No accounts, no analytics, no servers. Shortcuts • Cmd/Ctrl + click — inspect • Cmd/Ctrl + Shift + click — comment • Hold X — measure • Escape — deselect No design tokens, no framework, or plain HTML? Everything falls back to the class selector and a plain before/after. Open source (GPL v3): https://github.com/overlyhonest/awwdits