Vite

Load Cite only when import.meta.env.DEV is true. Works for React, Vue, Svelte, and Solid apps on Vite.

<script type="module">
  if (import.meta.env.DEV) {
    const s = document.createElement("script");
    s.src = "https://cite.brijr.dev/cite.js";
    s.dataset.project = "your-site";
    document.body.append(s);
  }
</script>

Install

Copy this into Claude, Cursor, or Codex.

Add Cite to this Vite project for local development only. Never ship it to production.

Cite: https://cite.brijr.dev/cite.js
Docs: https://cite.brijr.dev/vite

One script. It overlays the page so you can click an element, describe the change, and copy a bundle (selector, HTML, computed CSS, nearby DOM, request) into a coding agent.

In index.html (or the root layout), inject the script only when import.meta.env.DEV is true. Do not import cite.js as a module so Vite does not bundle it.

<script type="module">
  if (import.meta.env.DEV) {
    const s = document.createElement("script");
    s.src = "https://cite.brijr.dev/cite.js";
    s.dataset.project = "PROJECT";
    document.body.append(s);
  }
</script>

Replace PROJECT with this repo's name. data-project namespaces localStorage.

Optional: vendor https://cite.brijr.dev/cite.js into public/cite.js and load /cite.js instead.

Verify with the Vite dev server: Cmd+Shift+F (Ctrl+Shift+F on Windows) opens Cite. A circle marked => appears in the bottom right.

Do not add a package, backend, or auth. Do not load Cite in production.

Verify

Run the Vite dev server. Press Cmd+Shift+F. A circle marked => appears in the bottom right.

HTML Astro Next.js Vite