Svelte and SvelteKit

Set up with the CLI

npx @commentkit/cli init

It finds SvelteKit or Vite, writes VITE_COMMENTKIT_KEY to .env.local and adds commentkit() to vite.config.

It asks before each change. --yes applies them all and --install also installs the packages. To do it by hand, follow the steps below. See the CLI guide for the other commands.

Add the widget

npm install @commentkit/comment-kit

<script>
  import { commentkit } from "@commentkit/comment-kit/svelte";
  let { children } = $props();
</script>

<svelte:body use:commentkit={{ project: import.meta.env.VITE_COMMENTKIT_KEY }} />
{@render children()}

This is Svelte 5. On Svelte 4, drop the $props() line and use <slot /> instead of {@render children()}. In a Svelte app without SvelteKit, add the same line to App.svelte. The action removes the widget when the layout is destroyed.

Build plugin

npm install -D @commentkit/build

import { sveltekit } from "@sveltejs/kit/vite";
import commentkit from "@commentkit/build/vite";

export default { plugins: [commentkit(), sveltekit()] };

With plain Svelte, list commentkit() before svelte() from @sveltejs/vite-plugin-svelte.

The plugin also records the branch and commit of every build, so feedback is filed per branch without passing anything to init(). Values you pass yourself always win.

Environment variables

• VITE_COMMENTKIT_KEY: your project key. Public by design.
• import.meta.env.VITE_COMMENTKIT_BRANCH and VITE_COMMENTKIT_COMMIT: set by the plugin.

The branch and commit come from the first of these that is set: COMMENTKIT_BRANCH / COMMENTKIT_COMMIT (your override), then Vercel, Netlify, Cloudflare Pages, GitHub Actions, GitLab CI and Render’s own variables, then git. Set COMMENTKIT_SOURCE=1 to tag a preview build with source locations too, or COMMENTKIT_SOURCE=0 to turn tagging off. See build plugins.

Server rendering

Svelte actions only run in the browser, so the layout is safe to render on the server in SvelteKit.

init() does nothing on the server, so importing it never breaks server rendering. Call it once in the browser and keep the instance; destroy() removes every trace of the widget from the page.