How to annotate a website (4 honest methods)

You're looking at a page that needs changes, and the feedback is about to go somewhere terrible: a long email, a Slack thread full of cropped screenshots, or a spreadsheet with a column called “where.” Annotating the website directly skips all of that. You point at the thing, the note stays with the thing, and nobody has to decode “the blue feels off, also move the thing up a bit.”

There are four real ways to do it: browser devtools, screenshot markup, browser extensions, and live annotation tools. Full disclosure, we build one of those (Pin Feed is a live annotation tool), so you'd expect us to say method four wins every time. It doesn't. A quick devtools mock or a marked-up screenshot is the right call surprisingly often, and this guide says so. Every method below gets real steps and a straight read on where it breaks down.

What annotating a website actually means

Annotating a website means attaching feedback to a specific spot on a page: a note pinned to a button, a circle around a broken image, a highlight over a sentence that reads wrong. The point is context. “Fix the header” in an email forces whoever reads it to guess which header, on which page, at which screen size. A note sitting on the header does not.

The four methods below differ on three things, and almost everything else follows from them: where the annotation lives (on the live page, or on a picture of it), what the reviewer needs (nothing, some skill, an extension, or just a link), and what happens afterward (a thread you can track and resolve, or a PNG drifting through Slack until everyone forgets which page it came from).

Method 1: browser devtools (free, fiddly)

Every browser ships with developer tools, and they can do a crude but useful kind of annotation: edit the page in place, screenshot the result, and send the before and after. No software, no signup, no cost.

1. 1

   Open devtools

   Right-click anywhere on the page and choose Inspect, or press F12 (Cmd+Option+I on a Mac).

2. 2

   Make the whole page editable

   In the Console tab, type document.designMode = 'on' and press Enter. Now you can click into any text on the page and retype it like a document. Great for showing copy changes in place.

3. 3

   Mock the visual change

   In the Elements panel, click an element and edit its CSS in the styles pane: swap a color, bump the padding, hide a section with display: none. You're showing the change instead of describing it.

4. 4

   Capture the evidence

   In Chrome, press Cmd+Shift+P (Ctrl+Shift+P on Windows), type "screenshot", and pick "Capture full size screenshot" for the entire page in one image.

5. 5

   Send it with a sentence of context

   Paste the before and after wherever the conversation lives, and say what you changed. The screenshot carries the visual, your sentence carries the why.

Use it when: you're technical, the loop is you and another developer, and mocking a quick CSS or copy change beats writing a paragraph about it.

Method 2: screenshots and markup (fast, loses context)

The default method for most of the internet: capture the screen, draw an arrow on it, send it. It's fast, it's universal, and it works for anything you can see. It's also where feedback context goes to die, which we'll get to.

1. 1

   Capture the page

   Cmd+Shift+4 on a Mac to drag-select a region, Win+Shift+S on Windows. For a full-page capture, use the devtools trick from method 1, since the OS tools only grab what's on screen.

2. 2

   Mark it up

   Open the capture in Preview (Mac) or the Snipping Tool editor (Windows) and add arrows, boxes, and text. Both are fine for basic shapes and labels.

3. 3

   Go shared if several people are reviewing

   Paste screenshots into a Figma file or a slide deck so comments collect in one place instead of five DMs. This helps, though you're now maintaining a feedback document by hand.

4. 4

   Send it, then track it yourself

   Slack, email, wherever. Keep your own list of what's open and what's fixed, because the screenshot won't do it for you.

Use it when: it's one quick note, to one person, who'll fix it today. The moment feedback spans rounds, reviewers, or devices, this method starts costing more than it saves.

Method 3: browser extensions (decent, if everyone installs)

A step up from raw screenshots: annotation extensions live in your browser toolbar, capture the full page in one click, and give you a built-in editor. Some produce shareable links instead of files, which fixes part of the screenshot mess.

1. 1

   Pick one and install it

   Search your browser's extension store for a screenshot annotator. Look at the permissions before you commit, and check whether output is a file or a hosted link.

2. 2

   Capture the page

   Most offer visible area or full scrolling page. Full page is the win here, since it's awkward to get any other way.

3. 3

   Annotate in the built-in editor

   Arrows, boxes, text, blur for anything sensitive. Generally nicer than Preview or Snipping Tool for this job.

4. 4

   Share the link or the file

   Hosted links keep everyone looking at the same copy. Files put you right back in screenshot-folder territory.

One related note: some feedback products work this way too, requiring an extension or a script install on the site before anyone can comment (BugHerd is a well-known example). That's workable for your own team. It's a real hurdle for everyone outside it.

Use it when: feedback stays inside a team that already agreed on a tool and installed it. For internal QA passes it's honestly fine.

Method 4: live annotation with a share link (no install)

The first three methods all end the same way: a static image, separated from the page it describes. Live annotation flips that. The tool loads the real website, you click directly on the parts you're talking about, and the comments stay anchored there for everyone who opens the link. Here's the flow in Pin Feed, which works without installing anything on the site or in anyone's browser.

1. 1

   Paste the site's URL into a new project

   The live page loads in your dashboard through a reverse proxy. No script on the site, no plugin, no extension. The site itself stays untouched, and real visitors never see your notes.

2. 2

   Click anything to pin a comment

   Comment mode gives you a crosshair: click the button, the image, the paragraph, type your note, hit Enter. The pin anchors to the element itself (its CSS selector plus your click offset), so it stays put when the page reflows. Switch to browse mode to use the site normally, open menus, and navigate.

3. 3

   Draw the parts words can't carry

   Six drawing tools: pencil, highlighter, line, arrow, rectangle, and circle, each with a color picker and undo. Circle the misaligned grid instead of writing three sentences about it.

4. 4

   Check every screen size

   Switch between desktop (1440px), tablet (768px), and mobile (375px). Each viewport keeps its own set of pins, so "it looks broken on my phone" finally points at something specific.

5. 5

   Share one link

   Reviewers open it, enter a name and an email, and can pin, draw, comment, and resolve. No account, no signup, no install. You can rotate the link any time to cut off access.

6. 6

   Work the list and resolve as you ship

   Every pin is a thread with @mentions and a resolve state, and each one auto-captured a screenshot of the page at pin time, a point-in-time record of exactly what the reviewer saw.

There's more depth to how the pins anchor and what the drawing tools can do on the website annotation tool page if you want the full picture.

Use it when: more than one person reviews, feedback comes in rounds, or clients are involved. Anyone who can click a link can leave feedback, which is the whole point.

Which method should you use?

Match the method to the shape of the feedback, not the other way around:

• Quick mock of a fix, developer to developer: devtools. Edit the page, screenshot it, move on.
• One note, one person, fixed today: screenshot and markup. Don't overthink it.
• Internal team with shared tooling: an extension is fine, as long as nobody outside the team ever needs to review.
• Client reviews, multi-round revisions, multi-device QA: live annotation. This is the bread and butter of website feedback for agencies, where the reviewer is a client who will never install anything and shouldn't have to.

Pin Feed pricing for reference: free plan with 3 projects and 500 MB, Pro at $49/mo or $39/mo billed yearly. Every feature is on both plans.

One more honest note: these methods stack. Plenty of people run live annotation for client rounds and still fire off a marked-up screenshot in Slack twice a day. The goal isn't purity, it's never losing a piece of feedback because it was a picture of a page instead of a note on one. If you're weighing tools for the job, our rundown of the best website feedback tools compares the whole category, Pin Feed included, with the trade-offs stated just as plainly as they were here.