pagepaint/ field guide

00 / Visual feedback for dev & QA

Point it out.
Ship the fix.

Pagepaint puts a drawing and feedback toolbar on your app. Capture what’s wrong, leave a note, and give your coding agent the evidence.

See a review, start to finishDEMO / PAGEPAINT
Draw → capture → comment → save
01

One script.
Any app.

Drop this before </body>. No package install, backend, or local Node server.

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

Works on client-rendered and server-rendered pages. Each origin keeps its own local history.

Prefer an extension? Download for Chrome / Edge

Extract the ZIP, turn on Developer mode in your browser’s extensions page, then choose Load unpacked.

02

A bug report with the view attached.

  1. Mark the actual page

    Open the toolbar. Draw, highlight, or use a rectangle or circle to point at the problem.

  2. Add the evidence

    Capture the viewport or record a short clip. Add what you expected in the feedback thread.

  3. Save the context

    Your URL, query parameters, viewport, and marks stay with the note. Download a ZIP whenever you need it.

Drag the menu out of your way. Change your accent, project name, and shortcuts in Settings.

03

Leave it where your agent works.

Choose your app’s repository folder when you save. Pagepaint writes the note, image, and drawing data into .annotations/.

Add this to AGENTS.md or CLAUDE.md — or use Add agent instructions in Settings.

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

Folder access needs HTTPS or localhost in a supported desktop browser, such as Chrome or Edge. Other browsers keep feedback locally and can export a ZIP.

your-app/
└── .annotations/
    ├── <id>.json
    ├── <id>.webp
    ├── <id>.original.webp
    └── <id>.webm

The agent reads ordinary files.
No feedback server. No sync.

Images and video are written when attached.
Where does the feedback live?

Notes, drafts, captures, and preferences are saved in your browser’s IndexedDB. Browser storage is separated by origin, including localhost port; it can be cleared or evicted.

Selected repository files survive clearing browser storage. ZIP export is available without folder access. Pagepaint doesn’t upload your feedback; sharing to GitHub is an optional, separate action.

CDN screenshots reconstruct the DOM, so some CSS, cross-origin content, or video may look different. The extension uses native tab screenshots.