Getting started

Install with SvelteKit

Passback adds a small button to your site while you develop. Click it, click anything on the page, and write what should change. The comment goes to the coding agent you already have open.

Before you start

A SvelteKit project that runs on Vite.
Node 22 or later.
One of Claude Code, Codex or Cursor, opened in the project.

Install

In your project folder, add the two packages:
```
npm i -D passback @passback/vite-plugin
```
Set the project up:
```
npx passback init --apply
```
- Init does: detects that this is a SvelteKit project, safely edits a recognised Vite config to add the plugin, and prints the SvelteKit head instructions below. It installs no packages and never edits your layout.
- You do: open src/routes/+layout.svelte, apply the printed instructions while keeping everything the layout already has, and restart your dev server.
```
.: manually edit src/routes/+layout.svelte; pages show the widget only after this helper call.
.: import { passbackHeadHtml } from '@passback/vite-plugin/head' in the component script; add <svelte:head>{@html passbackHeadHtml()}</svelte:head> outside the script.
```
Check vite.config.ts. The passback() plugin sits beside sveltekit(). If init could not edit the config safely, it leaves the file as it is and prints the line to add by hand:
```
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import passback from '@passback/vite-plugin';

export default {
  plugins: [sveltekit(), passback()],
};
```
Add the helper to your root layout, src/routes/+layout.svelte. Keep everything the layout already has, and add the import to its script and the <svelte:head> line beside your markup:
```
<script>
  import { passbackHeadHtml } from '@passback/vite-plugin/head';
</script>

<svelte:head>{@html passbackHeadHtml()}</svelte:head>
```
Start your dev server as usual, or restart it if it was running. The Passback button appears in the bottom right corner.
Restart your agent in the project and approve the passback server when it asks. Then start a session: type /passback in Claude Code or Cursor, $passback in Codex. The agent waits for your first comment.

What a comment carries

The element you marked, your note and the page it was on.
No SvelteKit component names, source files or line numbers.

Compare frameworks in What a comment carries.

Comments from a build

In development a comment goes to the coding agent. In a staging build configured with mode: 'relay', a siteKey, an endpoint and stagingModes, comments go to the hosted relay:

passback({
  mode: 'relay',
  siteKey: '…',
  endpoint: '…',
  stagingModes: ['staging'],
});

Production builds outside stagingModes ship nothing because the helper returns nothing. The tags the helper writes follow the plugin's widget and screenshot settings. For the options, see Install with Vite.

Without the plugin, see Where the tag goes in your framework.

Next: Install with Astro