Skip to content
Get started
CommentKit / Frameworks

React (Vite)

The React helper, the Vite build plugin and env variables.

Set up with the CLI

In your app’s folder
npx @commentkit/cli init

It finds Vite, writes VITE_COMMENTKIT_KEY to .env.local, adds commentkit() to the plugins in vite.config and adds .commentkit/ to .gitignore.

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

Terminal
npm install @commentkit/comment-kit
src/App.tsx
import { CommentKit } from "@commentkit/comment-kit/react";

export default function App() {
  return (
    <>
      <YourApp />
      <CommentKit project={import.meta.env.VITE_COMMENTKIT_KEY} />
    </>
  );
}

Or call init() once in your entry file. The component does exactly that, and removes the widget when it unmounts.

src/main.tsx
import { init } from "@commentkit/comment-kit";

init({ project: import.meta.env.VITE_COMMENTKIT_KEY });

Build plugin

Terminal
npm install -D @commentkit/build
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import commentkit from "@commentkit/build/vite";

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

It tags elements with their source file and line under vite and builds with a mode other than production, never in vite build. It works the same with Preact and Solid. To load the widget only while the dev server runs, use the inject option with a pk_test_ key.

vite.config.ts (dev only)
commentkit({ inject: { project: "pk_test_your_key" } })

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, import.meta.env.VITE_COMMENTKIT_COMMIT and the global __COMMENTKIT_BUILD__: 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

A Vite single-page app renders in the browser, so there is nothing to do. If your app also renders on the server, the component only starts the widget once it is mounted in the browser.

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.