drafty

How to annotate a web page

Quick answer

To annotate a web page, the fastest path is a browser extension like Hypothesis: install it, highlight any text or click any element, and leave a note pinned there. For a one-off markup without installing anything, paste the URL into a screenshot-and-annotate tool. If you need a client or colleague to annotate it — and they won't install an extension — share a review link they can comment on directly in their browser.

Step 1

Browser extension (for yourself, persistent)

Hypothesis is the most capable free option: install the Chrome or Firefox extension, visit any page, select text or hover an element, and leave a note. Annotations are saved to your account and persist on return visits. Diigo works similarly and adds tagging and highlights. The catch: annotations live in your account, not on the page — anyone else who opens the URL won't see them unless they also have the extension and you share the annotation link explicitly. Best for personal research, study, or annotating articles before a meeting.

Step 2

Screenshot and markup (for sharing via email or Slack)

Take a full-page screenshot of the page (macOS: Cmd Shift 4, then drag; Chrome: open DevTools → Cmd Shift P → 'Capture full size screenshot'). Open the image in Preview on Mac or Paint on Windows and use the markup tools to draw arrows, boxes, or text callouts. This is the lowest-friction method for a quick one-off note — no accounts, no links. The downside: screenshots go stale the moment the page changes, and the receiver has to match your arrow to the right element on their live version. Works well for single-element feedback; breaks down fast on multi-round reviews.

Step 3

URL-based annotation tool (no install for you or them)

Paste the page URL into a tool like Hypothesis's public annotation layer, AnnotateWeb, or a similar bookmarklet tool. These render the page with an annotation layer that anyone with the link can read. The limitation here is that most URL-based tools require the recipient to also have the bookmarklet or be logged in to see your notes — so check before assuming the link is truly shareable without setup on their end.

Step 4

Shared review link (for client or stakeholder feedback)

When you need someone else to do the annotating — a client signing off on a redesign, a stakeholder reviewing a landing page before launch — the extension approach fails immediately. Most clients won't install a browser extension just to leave one note on your work. The cleaner path: use a tool that wraps the web page in a review layer and hands you a link. Your client opens it, clicks the heading or the button they mean, and types. The note is pinned to that exact element. They don't need an account or any software — just the link. You see every note in one thread, reply, and share a revised version on the same URL.

The faster way

If your client is the one annotating — not you — skip extensions entirely. Drop the page URL into Drafty, share the link, and they click the exact element they mean and pin a note right there. No account, no install, no 'the bit near the top left.' Every comment lands in one thread, anchored to the spot. You reply, fix it, and the updated page lives on the same link.

Open a live demo

Questions

Can I annotate a web page without installing anything?
Yes — use a bookmarklet tool (no extension install) or paste the URL into an annotation service. Both work in any browser. The trade-off is that bookmarklets are more fiddly to set up the first time, and URL-based tools sometimes require the other person to also have an account to see your notes.
How do I annotate a web page and share it with someone?
The cleanest way is a shared review link: the page loads inside a review layer, you annotate it, and you send the link — the recipient sees your notes without installing anything. Alternatively, annotate a screenshot and email the image, though that breaks on multi-round reviews.
How do I let a client annotate a web page without a browser extension?
Use a tool that wraps the URL in a shareable review link. Your client opens it in any browser, clicks the element they mean, and types a note — no extension, no signup. The note is pinned to that element, not a screenshot, so it stays in context as the page updates.
What is the best free tool to annotate a web page?
For personal annotation, Hypothesis is free and powerful — highlights, notes, and public or private layers on any page. For sharing with someone who won't install an extension, a shared-link tool works better because the reviewer needs zero setup.
Can multiple people annotate the same web page at once?
Yes, with a shared-link tool. Everyone with the URL leaves notes in the same place — each pinned to its element. Extensions like Hypothesis support public annotation groups, but all participants need the extension installed.
Does web page annotation work on mobile?
Browser extensions don't work on mobile Safari or Chrome for iOS. A shared review link (where the page opens inside a review layer) does work on mobile — tap the element and type. That's the only method that reliably covers desktop and phone reviewers.

Keep exploring

Stop emailing files back and forth.

Share one link. They comment on the exact spot — no account, always the current version.