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.

  
    
    solo-demo.mp4
    
  

  

  


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
// vite.config.ts
import spotnote from "spotnote";

export default defineConfig({
  plugins: [react(), spotnote()],
});
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:
## Request
Make the padding bigger

## Target
- file: components/ProductCard.jsx
- line: 7, column: 5
- used at: pages/Products.jsx:68 (<ProductCard> in Products)
- element: <div class="product">
- text: "shoes Aero Runner $120"
- instance: 1 of 12 rendered from this line (by DOM order) — target the one matching the text above

## Source path (outer → inner)
App > Products > ProductCard

## Current computed styles
  padding: 16px
  margin: 0px
  color: rgb(26, 26, 26)
  background: rgba(0, 0, 0, 0)
  font-size: 16px
  font-weight: 400
  border-radius: 12px
Every field is explained in Prompt Format.
MCP (local agent)
Skip the copy and paste: your agent picks up notes as you write them.
claude mcp add --scope user spotnote -- npx -y spotnote-mcp
Then ask your agent: Watch my Spotnote notes. Codex, Cursor and Gemini CLI.

  
    
    demo.mp4
    
  

  

  


With MCP connected: click a button, ask for a pill shape, and Claude Code picks up the note, makes the change and replies on it. You never leave the browser.
Staging builds
Let designers and reviewers write notes on a staging or preview deploy, and paste them to your team:
spotnote({ build: ["staging"] })
vite build --mode staging then includes Spotnote, and vite build still doesn't. Each prompt also names the commit the build was made from. See Staging Builds.

  
    
    staging-demo.mp4
    
  

  

  


On a staging build: the designer writes a note and pastes it to the team chat, and the developer's agent goes straight to the file and line.
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.
spotnote({ build: ["staging"], webhook: "https://feedback.example.com/spotnote" })
Each note arrives as JSON, with its text, page, file and line, commit, and prompt. See Webhook.

  
    
    demo-webhook.mp4
    
  

  

  


On a staging build with a webhook: press Enter, and the note lands in your team's chat, with its file and line.
Docs
Full documentation is here
License
MIT