Pagepaint

Visual feedback for developers & QA

Point to the problem.

Draw on your app. Capture a screenshot or record a clip. Save the feedback where your code lives.

Install Pagepaint

See the workflow

Draw. Capture. Explain. Save.

One toolbar, right on the page.

One script.
Your app.

Drop this into your HTML. Plain JavaScript, bundled dependencies. No build step or feedback server to set up.

HTML · before </body> 
<script src="https://pagepaint.dev/v0.4.4/pagepaint.js" data-pagepaint defer></script>

Prefer a browser extension? Download for Chrome / Edge and load the extracted folder using Load unpacked in Developer mode.

Make the next fix obvious.

  1. Mark the page

    Open Feedback and choose Draw & capture. Use a pen, highlighter, rectangle, or circle to show exactly what needs attention.

  2. Add the context

    Attach the capture or record a short clip. Add your comment. Pagepaint keeps the full URL, query parameters, and viewport with it.

  3. Keep it with the code

    Choose your repo folder when saving, or keep feedback in browser storage. Download a ZIP whenever you need to hand it over.

Give your agent the evidence.

Repo saving writes the capture, recording, and JSON into .annotations/. Add this 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. Other browsers can use browser storage and ZIP export. 

.annotations/
  feedback.json
  feedback.webp
  feedback.webm

status: "open" → "resolved"