pagepaint(1) 01 / Terminal

Visual feedback for dev / QA

Show
the bug

Draw on your app. Capture the problem. Leave a note your coding agent can actually act on.

One-script install

JavaScript / Open source / MIT

pagepaint-demo.mp4 Product walkthrough
Draw. Capture. Explain. Save.
Live-page drawing Viewport captures Short recordings Notes + threads Repo files + ZIP

Add it to your app.

INSTALL

Paste this into your HTML. That is the install.
Works with static pages and server-rendered apps.

No package install.
No feedback server.

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

Pins version 0.4.0. Dependencies are bundled. The widget runs in your app’s origin.

JavaScript API
Prefer a browser extension?

Download and extract the Chrome / Edge extension ZIP. Open chrome://extensions or edge://extensions, enable Developer mode, and choose Load unpacked. Select the extracted folder, then click the extension icon on your app.

The extension uses native tab captures. Its feedback history is separate from the CDN widget’s history.

Give the fix some context.

WORKFLOW

  1. Open feedback.

    Click the floating button. Choose an accent on first load, then start a note or a thread.

  2. Mark the problem.

    Use Draw & capture to doodle directly on the page. Pen, highlighter, rectangle, and circle are built in.

  3. Explain and send.

    Attach the capture, add a comment, and send. The URL, query parameters, viewport, and timestamp travel with it.

ALSO AVAILABLE

Record a tab, window, or screen for up to one minute. Drag the menu out of the way. Change colors and hotkeys in Settings.

Your repo. Your evidence.

LOCAL FILES

Notes save automatically in browser IndexedDB. To put them where your coding agent works, select your app’s repository folder when saving.

Pagepaint writes ordinary files to .annotations/. Ask your agent to check open items, make the fix, and mark them resolved.

Folder access needs desktop Chrome or Edge over HTTPS or localhost, plus your permission. On other browsers, use Download ZIP.

your-app/ 
└─ .annotations/
   ├─ <id>.json           note + context
   ├─ <id>.webp           marked capture
   ├─ <id>.original.webp  reference capture
   └─ <id>.webm           recording

Image and video files appear when attached.

Add this line to AGENTS.md or CLAUDE.md:

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

Settings → Add agent instructions can append it for you.