MarkLayer — Visual CSS Debugger & Annotator

Inspect, edit, comment, draw, measure & audit any site — breakpoint-aware, fully offline. Export annotations as JSON & PNG.

MarkLayer turns any website into a visual review surface. Toggle the overlay and you can inspect the box model of any element, live-edit its text, colors, fonts and spacing, drop anchored comments, and draw arrows, boxes and highlights directly on the page — no code, no rebuilds. When you're done, export everything to a single JSON file. A teammate picks "Import & open" from the toolbar, and MarkLayer opens the right site and re-applies your comments, edits and drawings automatically — even across multiple pages and single-page-app routes. FEATURES • Inspect — hover to see margin / border / padding, size, colors and fonts; click to copy a resilient CSS selector. • Edit — change text, text/background/border color, font size & weight, alignment, spacing, radius, opacity, width/height, and an element's link (href) or image (src/alt). Every change is reversible. • Comment — drop pins anchored to elements, with author names, threaded replies, and resolve. • Draw — pen, arrow, rectangle, highlighter and text labels; arrows attach to the element they point at and follow it across screen sizes. • Routes — annotations are scoped per page/route, so reviews survive navigation and SPAs. • Sessions — each annotation set is a session; MarkLayer auto-saves one when you turn the overlay off and keeps your old work safe when you import. Restore, rename, export or delete. • Export / Import — one self-contained .json carries everything; "Import & open" loads it as its own session on the matching site without overwriting your current work. • Works on desktop, tablet and phone widths; supports touch and stylus. PRIVACY MarkLayer stores your annotations locally in your browser. It does not send your data to any server, and there are no accounts or trackers. The only network activity is whatever the website you're viewing already does. HOW TO USE 1. Open any normal website tab. 2. Click the MarkLayer icon (or press Alt+Shift+M) to toggle the overlay. 3. Pick a tool from the bottom toolbar (or press V / E / C / D). 4. Export from the toolbar to share; teammates use "Import & open" to view your work.