Spotnote

Spotnote is a Vite plugin for UI feedback to coding agents. Click any element in your running app, write what should change, and hand your agent its exact file, line and column.

https://github.com/user-attachments/assets/eb1bdb07-1660-48cd-b1fe-b9650e7d110d

Features

- Exact spot. Your UI feedback points to the exact file, line and column in your source code, so your agent doesn't have to search for it.
- Any Vite framework. React, Vue, Svelte, Solid, Astro, and so on.
- Zero imports. Nothing to import in your app code.
- Production stays clean. Spotnote runs only in vite dev, and in staging builds you turn it on for.
- Everything is local. No account, no cloud.

Requirements

- Vite 5 or later
- Node 22 or later

Install

Usage

Start your dev server and click the launcher in the bottom-left corner. Click an element, type what should change and press Enter. The prompt is on your clipboard: paste it into Claude Code, Cursor, Codex or any chat.

Output

The prompt Spotnote copies for a note, ready to paste into your agent:

Every field is explained in Prompt Format.

Webhook

Send each note to a URL of yours as it's written: to post it to your team's chat or issue tracker, without the copy and paste.

build: ["staging"] keeps Spotnote in vite build --mode staging, for reviewers on a staging deploy (see Staging Builds). Each note arrives as JSON, with its text, page, file and line, commit, and prompt. Add screenshot: true to send a screenshot of the note's elements with it. See Webhook.

https://github.com/user-attachments/assets/e401dbac-df17-4762-a291-752cb8a04595

_On a staging build with a webhook: press Enter, and the note lands in your team's chat, with its file and line, and a screenshot._

Docs

Full documentation is here

License

MIT