Marklayer — Webpage Annot

MarkLayer lets you annotate any webpage and share it instantly.

Draw freehand, add shapes, arrows, highlights, and text on top of any site. Drop comments anywhere on the page. Pick any element to grab a stable selector with computed styles and the framework component (React, Vue, Svelte) — paste it straight into Cursor or Claude. Measure dimensions and gaps between any two elements without opening DevTools.

Share a link — anyone can see your annotations and collaborate in real time. No extension required on their end.

🚫 No account, no sign-up, no paywall. Open a page, annotate it, share the link.

Use it for:
🎨 Giving feedback on designs, landing pages, or live sites
🐛 Bug reports with visual context instead of screenshots
👥 Collaborating with teammates on any webpage in real time
🤝 Design-to-code handoff — selector, styles, parent layout, component name, all in one paste
📐 Measuring spacing on a live page (or a Figma export) without DevTools
📚 Marking up articles, docs, or research for yourself or others

Features:
🖊️ Freehand drawing, shapes, arrows, lines, and text
🖍️ Highlighter and eraser tools
💬 Comments pinned to any spot on the page
👀 Real-time cursors and collaboration
🎯 Element inspector — selector, computed styles, framework component (React/Vue/Svelte)
📏 Measure tool — dimensions and edge-to-edge gaps between elements
🧰 Customizable toolbar — drag tools to reorder, layout persists
📸 Export annotations as PNG
🌐 Works on any webpage
🔓 No account required — just install and go