Turn any website into a collaborative review board.

One <script> tag turns your live page into a review surface. Highlight, draw, pin and comment — anchored to the real content, saved in the browser, shared as a single JSON file.

>_ <script src="https://cdn.jsdelivr.net/npm/@reviewjs/annotate/annotate.js" defer></script>

This page is live — select a sentence, press R to draw, P to pin, A for comments.

yoursite.com/launch-plan
GO-TO-MARKET

Q3 launch plan

We open with a two-week teaser, then give early access to our waitlist of 12,000 subscribers before the public announcement.

Paid social runs alongside, with the hero video as the centerpiece across every channel.

2
JD
Jane Doe
2m ago · highlight
#2

Can we pull the waitlist email a week earlier? Momentum matters.

Reply…
Drops into anything that renders HTML
ReReact NxNext.js VuVue SvSvelte WPWordPress WfWebflow ShShopify
01 — The tools

Feedback that points at the real thing

Screenshots go stale and chat threads lose context. Six tools keep every note attached to the exact pixel, paragraph or region it’s about — each carrying its own threaded comment.

H

Highlight

Select any text to highlight and comment on the exact words — re-anchors even after edits.

Text-aware anchors. Stores the selected quote plus nearby context so feedback follows copy changes instead of becoming a dead screenshot.

R

11Rectangle

Draw a box around any region — a misaligned button, a whole section, anything.

Region-level markup. Captures the exact page area for layout, spacing, alignment, and responsive QA notes.

C

12Circle

Ring anything that needs a closer look. Each mark carries its own colored thread.

Visual callouts. Pulls attention to specific details such as icons, image crops, labels, badges, and small design misses.

P

Pin

Drop a precise point marker on a single pixel and attach a note to it.

Pixel-precise notes. Best for tiny targets: typos, broken links, awkward tap areas, and one-off UI defects.

D

Freehand

Sketch directly over the design when words won’t do — ink it in.

Drawn direction. Adds rough paths, crop lines, arrows, and markup shapes without switching to a design tool.

+

Section note

Hover any paragraph or heading for a comment button in the margin.

Block comments. Attaches discussion to a heading, paragraph, or content block when the feedback is about the whole section.

02 — Why reviewjs

The right amount of tool

No backend to stand up. Nothing to get past security review. It lives in the browser, exports JSON, and gets out of the way.

~40KB
Minified + gzipped
0
Dependencies
1
Script tag to install
100%
Local · nothing leaves

One script tag

No build step, no framework, no signup. Paste a line, reload, review.

Works everywhere

Plain HTML, React, Vue, Svelte, WordPress, Webflow, Shopify, static sites.

Local-first & private

Every comment is stored on the reviewer’s device. Nothing is sent anywhere.

Portable

Reviewers export feedback as JSON and send it; you import it with one click.

Polished UI

Floating toolbar, Figma-style comments panel, auto light/dark, full shortcuts.

Tiny & dependency-free

~40 KB of vanilla JavaScript, zero dependencies, every evergreen browser.

Smart re-anchoring

Notes that survive your edits

Each text annotation stores the exact quote plus a short prefix and suffix. On load it re-finds that text, so highlights stay put even after you rewrite copy or the layout reflows. Delete the text entirely and the comment is kept, gracefully marked “orphaned.”

v1 the quick brown fox jumps
↓ you edit the paragraph
v2 a very quick brown fox leaps
✓ comment re-anchored automatically
03 — Sharing

Your feedback never leaves the page

There’s no server and no database — every comment is saved to localStorage on the reviewer’s own device. Sharing is one explicit, privacy-friendly round-trip.

REVIEWER’S BROWSER

Highlight, draw, pin and comment. Notes are saved locally, instantly.

review.json
YOUR BROWSER

Click Import, pick the file — every note reappears anchored in place.

04 — How it compares

The whole category is rented. This one you own.

Every major visual-feedback tool is paid SaaS that asks your reviewers to log in, install an extension, and trust a vendor to host your feedback. annotate.js is the local-first, open-source alternative.

annotate.jsBugHerdMarker.ioUserbackPastel
PriceFree · MITfrom ~$39/mofrom ~$39/mofrom ~$79/mofrom ~$29/mo
Open sourceYesNoNoNoNo
Reviewer login requiredNoneAccountAccountPortalGuest friction
Install1 script tagExtensionScript + extensionSDK / widgetProxy / link
Where feedback livesYour browserVendor cloudVendor cloudVendor cloudVendor cloud
Works offline / self-hostYesNoNoNoNo
Visual tools (draw/pin/ink)Full setPin + boxPin + boxPin + drawPin + box
Bundle size~40 KBHosted appHosted appHosted appHosted app

Competitor pricing and capabilities are approximate, based on publicly listed 2026 plans, and change often. The honest trade-off: SaaS tools add cloud sync, real-time multiplayer and built-in Jira/Asana sync that annotate.js leaves to your own workflow. annotate.js is for teams who’d rather own a tiny, private layer than rent a heavy one.

05 — Who it’s for

One layer, many reviews

Anywhere people need to point at a page and say “this, right here.”

Design

Design QA

Box misalignments and circle off-brand color on the staging build before a release ships.

Agencies

Client feedback

Let clients mark up the staging site directly — no Loom, no spreadsheet of bugs, no logins to chase.

Content

Copy editing

Editors highlight sentences and leave revisions in context, on the live article, not in a separate doc.

Docs

Docs review

Readers flag confusing steps right on the published page, where the confusion actually happens.

QA

Bug triage

Pin the exact element, attach a note, and export the batch straight to your tracker.

Teaching

Critique & grading

Annotate student work and portfolios with threaded, resolvable comments — private to each machine.

06 — Anywhere

One rule everywhere: load it once, after render

It’s a plain browser script, so the recipe is the same for every stack. Copy, paste, ship.

…and more: Angular Astro Squarespace Static sites Plain HTML Anything with a browser
Make it yours

Configured with plain data-attributes

No config files, no init code. Set a brand color, a project namespace, a default theme and a reviewer briefing — all on the script tag itself.

  • data-accent — match your brand in one hex code.
  • data-theme — light, dark, or auto (it sniffs your page background).
  • data-project — keep separate sites’ comments cleanly apart.
  • data-note — brief reviewers on exactly what to look at.
index.html
<!-- one tag, fully configured -->
<script
  src="https://cdn.jsdelivr.net/npm/
       @reviewjs/annotate/annotate.js"
  data-project="marketing-site"
  data-accent="#6d28d9"
  data-theme="auto"
  data-position="bottom-right"
  data-note="Focus on the hero copy
       & pricing — flag anything off-brand."
  defer
></script>
Questions

Good things to know

Where are comments stored?
In the reviewer’s own browser via localStorage, namespaced by project and page. Nothing is ever sent to a server. To share, you export a JSON file and your teammate imports it — every note reappears anchored in place.
Does it work with my framework?
Yes — it’s a plain browser script. There are copy-paste recipes for React, Next.js, Vue, Svelte, WordPress, Webflow, Shopify and plain HTML in the README. The rule is the same everywhere: load it once, after the page renders.
What happens if the underlying text changes?
Each text annotation stores the exact quote plus a short prefix and suffix. On load it re-finds that text, so notes survive copy edits and layout reflows. If the text is deleted entirely, the comment is kept but shown as “orphaned” rather than silently lost.
Can I show it only on staging, or only to editors?
Yes. Load the script conditionally — e.g. only on a staging domain, or only for logged-in editors. Since it’s one tag, you control exactly when and where it appears.
What does it cost?
Nothing. annotate.js is open source under the MIT license, free for personal and commercial use. No seats, no projects limit, no trial clock.
Which browsers are supported?
Every modern evergreen browser — Chrome, Edge, Firefox and Safari. It uses standard DOM APIs only, with no polyfills, and gracefully no-ops where localStorage is unavailable (private mode, sandboxed iframes).
07 — Get started

Put a review layer on your site today

Copy one script tag, reload, and start marking up the live page. No build step, no framework, no signup.

>_ <script src="https://cdn.jsdelivr.net/npm/@reviewjs/annotate/annotate.js" defer></script>
Read the docs

Ready in 30 seconds · ~40 KB · every evergreen browser · no account required

Copied to clipboard