Pagepaint
Visual feedback for dev & QA Open source · MIT · v0.4.4

Review the page.
Show the bug.

See the feedback workflow

Two ways to install.

Add a script to your app, or use the browser extension.

Option 01 · CDN script

One script.
Your app.

Add this before </body>. Works with static pages, client apps, and server-rendered HTML.

index.html 
<script src="https://pagepaint.dev/v0.4.4/pagepaint.js" data-pagepaint defer></script>

The versioned URL pins v0.4.4. No build step or local Node server needed.

Option 02 · Chrome / Edge

Same tools.
Any app.

Use Pagepaint without changing the app’s code. The extension captures native tab pixels and keeps its own local project library.

Install from Chrome Web Store Download latest ZIP · 0.4.4

Store version: 0.4.2. The latest ZIP, 0.4.4, includes direct and bulk GitHub sharing.

Install from the store

  1. Add Pagepaint. Open the store listing in Chrome or Edge and choose Add to Chrome or Get extension. Confirm the install.
  2. Open it on your app. Pin Pagepaint from the browser’s Extensions menu. Click its icon on the page you’re reviewing, or press Alt + Shift + P.

Prefer the latest ZIP?

  1. Download and extract. Unzip the package into a folder you’ll keep on your computer.
  2. Open Extensions. Visit chrome://extensions in Chrome or edge://extensions in Edge. Turn on Developer mode.
  3. Load the folder. Click Load unpacked and select the extracted folder containing manifest.json.
  4. Start reviewing. Pin Pagepaint and click its icon on your app, just as with the store version.

Change the extension shortcut at chrome://extensions/shortcuts or edge://extensions/shortcuts. Drawing shortcuts and toolbar color are configurable in Pagepaint Settings.

What can the extension access?

Pagepaint activates when you click its icon. It has no blanket access to every site. Screenshots, comments, recordings, and their URLs save locally; folder saving and GitHub sharing need your explicit action. Browser settings pages and protected content may block capture.

Use Open project library in Settings to find saved feedback. Export a ZIP or save to a repo before uninstalling: removing the extension deletes its browser copies.

A useful bug report, in three steps.

Open the toolbar in the app you’re testing. Keep the evidence and the explanation together.

  1. Point it out.

    Use a pen, highlighter, rectangle, or circle directly on the page. Capture the view, or record a short video.

  2. Say what happened.

    Add a comment and send. Notes, drafts, and attachments save in this origin’s browser storage (IndexedDB).

  3. Hand over the context.

    Choose your repo folder to save ordinary files in .annotations/, or download everything as a ZIP.

Files your agent can read.

Repo saving writes the comment, full URL, viewport, shapes, and status into JSON beside the capture or recording. 

.annotations/
  <id>.json
  <id>.webp
  <id>.webm

Add a line to AGENTS.md or CLAUDE.md

Check .annotations/ for open items; set status to resolved when done.

Folder access needs desktop Chrome or Edge on HTTPS or localhost, and your permission. Other browsers can use browser storage and ZIP export.

Browser storage belongs to each origin, including localhost ports. Clearing site data removes it; files you saved to your repo remain.