Add visual feedback to your SvelteKit app.

SvelteKit renders every page into src/app.html. Add the pinthread tag there, and comments work on every route, in development and after the build.

01 · Create a project

Sign up free with Google and create a project in the dashboard. Its Install tab shows the tag with your project key filled in. The Free plan costs $0 a month.

No SvelteKit app yet? Start one:

npx sv create my-app

02 · Add the script tag

src/app.html

<script src="https://pinthread.dev/embed.js"
  data-project="YOUR_PROJECT_KEY" defer></script>

Paste it before </body>, outside the element that holds %sveltekit.body%. SvelteKit then keeps the tag when it hydrates the page.

Replace YOUR_PROJECT_KEY with the key from the Install tab. The key is public: it only tells the widget which project to load.

03 · Check that it works

Run npm run dev and open the address SvelteKit prints, such as http://localhost:5173. The pinthread button shows at the edge of the page, and the project’s Install tab changes from waiting to installed. Click the button, sign in, and pin a comment to any element.

Pages on localhost and 127.0.0.1 load pinthread for every project. For a deployed site, add its address under the project’s Settings.

Troubleshooting

The button disappears after hydration

The tag is inside the element that holds %sveltekit.body%. Move it after that element.

The button shows locally but not on your host

Add the deployed address under the project’s Settings. Local addresses work without this step.

Connect your coding agent

pinthread is also an MCP server. Claude Code, Cursor, or Codex can read every comment with its page and element, make the change, and reply in the thread.

Questions

Does pinthread work with SvelteKit client-side navigation?

Yes. The widget stays loaded when SvelteKit changes the route, and it shows the comments for the new URL.

Does pinthread work with adapter-static and prerendered pages?

Yes. The tag is in app.html, so every prerendered page includes it.