Installation
About 1 minute. Two steps, no changes to your app code.
Requirements
- Vite 5 or later, on Node.js 22 or later.
- A React, Vue, Svelte, Solid or Astro app. See the tested versions.
Installation
Let your agent do it
Add the spotnote-setup skill to your coding agent, then ask it: Set up Spotnote in this app. It does both steps below, and can connect itself through MCP.
Install the package
npm install -D spotnoteIt's a dev dependency because it only runs in your dev server.
Add the plugin
Add spotnote() to plugins in vite.config.ts. Anywhere in the array works.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import spotnote from 'spotnote';
export default defineConfig({
plugins: [react(), spotnote()],
});SvelteKit, React Router and SolidStart have a vite.config of their own: add it there, as above (SolidStart 1: under vite.plugins in app.config.ts). See Meta-frameworks.
Done. You don't import anything in your app code.
Production builds and tests are untouched
The plugin only runs during vite dev. vite build doesn't include it (unless you turn on a staging build), and neither do Vitest runs, so your tests' DOM and snapshots stay the same.
Next
Quick Start: write your first note. About 2 minutes.