pagepaint
README.md v0.4.4 MIT

Pagepaint

Point at the bug.
Keep the context.

A JavaScript widget for reviewing AI-built apps. Draw on the page, capture what you see, and leave feedback your agent can read.

Install Pagepaint
Pagepaint in usedraw → capture → save
Visual feedback, right where the problem is.

Installation

Paste this tag into your app’s HTML. Pagepaint mounts a feedback button. That’s the setup.

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

Plain JavaScript. Dependencies included. No local Node server or feedback backend.

Prefer an extension? Download for Chrome / Edge
Unzip, enable Developer mode in your browser’s extension manager, then choose Load unpacked.

Review the actual page

  1. Mark what needs work.

    Open Pagepaint. Draw directly over the live page with a pen, highlighter, rectangle, or circle.

  2. Attach the evidence.

    Capture the view and add a comment. For a behavior bug, record a short screen clip instead.

  3. Keep moving.

    Send the note. Feedback autosaves in this browser, with the full URL, query, viewport, and page context.

Hand it to your agent

Choose your repository folder when saving. Pagepaint writes ordinary files into .annotations/, ready for Claude Code or another agent in that workspace.

.annotations/
feedback-id.json comment, URL, shapes, status
feedback-id.webp annotated screenshot

Add this line to AGENTS.md or CLAUDE.md, or use Add agent instructions in Settings:

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

The agent reads the files, makes the fix, and updates the JSON status. Repo files stay on your disk.

A few practical details

Local by default
Browser storage belongs to the app’s origin. Each domain and localhost port keeps its own history. Export a ZIP as a backup.
Folder access
Use Chrome or Edge over HTTPS or localhost to choose a repo folder. Firefox and Safari can keep feedback in the browser and download a ZIP.
Your workflow
Rename the project, choose an accent, and configure shortcuts in Settings. Drag the menu to place it, and keep notes in threads.
Capture limits
Embedded screenshots reconstruct the page; some media and cross-origin content can differ. The extension uses native tab capture.

Need the API, configuration, or contributor guide? Read the repository docs