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.

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.

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.

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.

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