To draw and highlight on any web page, install a free browser extension that adds a drawing layer over the live page, then use its tools — highlighter, pen, arrows, and sticky notes — to mark things up directly. You're not editing the site; you're adding temporary marks on top of it. Here's how to do it and what each tool is for.
The toolkit for marking up a page
Most annotation comes down to a handful of tools, each suited to a different job. Knowing which to reach for makes your markup clearer.
- Highlighter: color over text to call out a specific word, line, or sentence.
- Pen / freehand: circle an element or scribble a quick mark.
- Arrows: connect a comment to the thing it refers to, especially across distance.
- Sticky notes: write a comment anchored to a spot on the page.
- Colors: use different colors to separate categories — say, red for bugs, green for approvals.
How to do it for free
Highlite is a free, no-account extension (Chrome and Firefox) that provides all of these:
- Install it and open any page.
- Open the toolbar and pick a tool — highlighter, pen, arrow, or note.
- Choose a color if you want to color-code your marks.
- Draw directly on the page.
- Capture a screenshot to share the marked-up result.
It runs entirely in your browser, so nothing you draw or the page itself gets uploaded — fine for internal pages and private work.
Drawing on things that aren't text
This is where drawing pulls ahead of a plain highlighter. A highlight can only color words. A pen or arrow can point at anything on the page — an image that's the wrong crop, a button that's hard to find, a gap in a layout, spacing that feels off, a chart with no labels. Whenever the thing you're reacting to isn't a run of text, drawing is the only tool that reaches it.
- Circle an image or icon to flag it — a highlighter can't touch non-text elements.
- Draw an arrow from a note to a specific button, field, or region.
- Sketch a box around a section to say 'this whole block needs work.'
- Mark empty space — the awkward gap a highlighter has nothing to grab onto.
Getting clean arrows and shapes
Freehand is fast but messy. A few habits keep drawn markup legible for whoever receives it. Draw the arrow last, after you've written the note, so it points from the words to the target instead of the other way around. Keep circles loose — one confident loop reads better than a tight, retraced scribble. And resist the urge to annotate everything: three clear marks land harder than a page buried in ink.
Using color and arrows well
A messy markup is as confusing as no markup. A couple of habits keep it readable: use arrows when a note can't sit next to its target, and use color consistently so the recipient can tell categories apart at a glance.
Reviewing a pricing page, you highlight the price in yellow ("verify this is current"), draw a red arrow at a broken link, and add a green note on the layout ("this section looks great"). The colors alone tell the reader what's a problem and what isn't.
Drawing on a live page vs. on a screenshot
You can mark up the live page in the browser, or capture a screenshot first and draw on the image. Drawing on the live page is faster and keeps everything in context — you scroll, you mark, you move on. Screenshots are better when you need a fixed record: the page might change, or you want to drop the marked-up image straight into a ticket, email, or doc. A good browser annotator does both — draw on the live page, then capture the result as an image in one step.
Where drawing beats every other kind of markup
Three jobs are almost entirely drawing, not highlighting:
- Design feedback: circle the misaligned element, arrow the color that's off, box the section that needs rework — spatial problems need spatial marks.
- Bug reports: point an arrow at the broken control and note what you expected. A developer sees exactly where to look before reading a word.
- Teaching and walkthroughs: draw the path an eye should follow — 'start here, then here' — which no highlight can express.
When drawing is enough — and when it isn't
Freehand drawing and highlights are perfect for quick, visual communication you hand off as an image. What they don't do is track changes over time or sync to a shared workspace — for that you'd want a hosted tool. For the common case of "circle a few things and send it," a free browser annotator is the shortest path.
If you want the note-taking angle specifically, see how to add sticky notes to any website, and for the full markup workflow, how to annotate any webpage.
Drawing and arrows vs. plain text highlighting
There's a real difference between drawing on a page and highlighting text, and it changes which tool you reach for. Highlighting is for marking words you want to keep or call out. Drawing — pens, circles, arrows — is for pointing at anything: an image, a layout gap, a button, a region with no text at all.
This guide covers the full drawing toolkit. If your goal is specifically to highlight and save passages of text as you read, the focused guide on how to highlight text on a website is the better starting point. Most people end up using both: highlights for words, drawing for everything else.
Frequently asked questions
How do I draw on a web page?
Install a browser extension that adds a drawing layer, open the page, pick the pen or arrow tool, choose a color, and draw directly on top of the page. Capture a screenshot to share the marked-up result.
Can I highlight text and draw at the same time?
Yes — a full annotator like Highlite lets you combine highlights, freehand drawing, arrows, and notes on the same page. Color-coding helps: pick one color for problems and another for approvals so the reader can scan the result at a glance.
Do I need an account or any software to draw on a page?
No. A browser extension like Highlite adds the drawing layer directly in Chrome or Firefox — no desktop app, no sign-up. Install it, open a page, and start drawing.
Will my drawings change the actual website?
No. The marks sit on a temporary layer over the page — you're drawing on top of it, not editing it. Reload the page and your marks are gone unless you captured a screenshot first, and nobody else visiting the site sees them.
Try it on this page — grab the pen, circle this line, then draw an arrow to it. Free, no account, and it takes about ten seconds.