markup overlay for live web apps
Insofar is a markup overlay for your live web app. Pin the element on staging, say what's wrong, and hand your developer — or their agent — a prompt packet that answers every follow-up question before it's asked. The panel on the right is the product, live on this page — a read-only tour annotating the page you're reading.
No extension · no SPA · no login for the overlay — just one paste.
what the overlay does
Drop the bookmarklet on any URL — staging, production, localhost. Click an element to pin it, or scribble freehand around whatever looks wrong. The overlay runs in its own transparent layer, so your app keeps its pixels, its styles, and its listeners.
tool · pick · draw · noteInsofar remembers where an element lives — tag, attributes, text, landmarks — and re-finds it after the redesign. When it can't, it nudges: re-anchor? A pin is never silently lost. (The pins on this page track their elements while you scroll — that's this, live.)
The thread hangs on the element itself — not in a tracker three tools away. Say what's wrong, propose the fix, reply in place. The whole conversation lands in the packet verbatim.
thread · on the pin · in the packetEverything lands in one self-contained paste: instruction verbatim, URL + viewport, DOM + computed styles, screenshot, thread, trail. Markdown for humans, rich HTML for docs, JSON for agents. Change only what is asked — no clarifying question required.
packet · markdown · html · jsonRecolor the button, rewrite the label, hide the banner — the overlay paints a watermarked draft on the real page. Before/after goes into the packet with generated CSS, and one click reverts.
draft · watermarked · revertibleStatus, PR and commit links, every message, every decision — append-only. What shipped, who asked for it, why it looks like that now. Months later, the answer is still on the element.
trail · status · links · historyprivacy, by construction
Only the anchored subtree, the screenshot crop, and listed metadata ever leave the page.
One link onto your bookmarks bar. It opens the overlay on any page you can see — no install, no account to look at a pin.
Click the element, write the instruction, sketch a draft if you can see the fix. Threads keep the context where it happened.
One copy button. Into your developer's editor, your tracker, or straight into an agent — and the change lands without a single clarifying question.