Plugin API

spotnote()

import type { FilterPattern, Plugin } from 'vite';

export default function spotnote(options?: {
  exclude?: FilterPattern;
  port?: number;
  build?: string[];
  webhook?: string;
}): Plugin[];

The package's only export. Call it and add the result to plugins:

import spotnote from 'spotnote';

export default defineConfig({
  plugins: [react(), spotnote()],
});

Options

exclude

Files not to stamp: globs relative to the Vite root, or regular expressions matched against the file's absolute path. One pattern or an array.

spotnote({ exclude: ['src/scene/**', /\.stories\.tsx$/] })

Their elements can't be picked directly: a click picks the nearest stamped element around them. Files in node_modules are never stamped.

port

The port of spotnote-mcp, when 4848 is taken. Without it, the plugin reads SPOTNOTE_PORT, then uses 4848.

spotnote({ port: 4900 })

Your agent starts spotnote-mcp, so give it the same port there: SPOTNOTE_PORT=4900 in its environment.

build

Modes to also run in vite build for, such as a staging or preview deploy. Empty by default: builds don't include Spotnote.

spotnote({ build: ['staging', 'preview'] })

vite build --mode staging then includes it, and vite build (mode production) still doesn't. Never list your production mode.

Prompts then name the commit the build is made from. See Staging Builds.

webhook

A URL that gets each note as it's sent, as JSON in a POST: on the dev server and in builds.

spotnote({ webhook: 'https://feedback.example.com/spotnote' })

What it sends, and how to post it to your team's chat: see Webhook.

Plugin order

Order in plugins doesn't matter. The stamping transform hook is registered with order: "pre", which runs before every hook without an order, including framework plugins that are themselves enforce: "pre" (Svelte, Solid).

plugins: [react(), spotnote()]
plugins: [spotnote(), svelte()] // same result

Warnings

[spotnote] skipped pages/Editor.tsx — couldn't parse it, so its elements won't be pickable.

Printed once per file that Spotnote can't parse, whatever its type (.jsx, .tsx, .vue, .svelte or .astro). The file is passed on to your framework's compiler unchanged, so your app still works; only that file's elements can't be picked directly.