@karpo.dev/devtools

The Karpo inspector: a Vite plugin that serves the inspector UI from your app's dev server, and the in-app agent it talks to. It shows the local replica's tables, runs read-only SQL against them, and reports sync state — connection, pending writes, the active schema version, rejections.

npm install --save-dev @karpo.dev/devtools

Peer dependency: Vite ≥ 5.

Usage

// vite.config.ts
import { karpoDevtools } from "@karpo.dev/devtools/vite";
import { defineConfig } from "vite";

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

The inspector is then at http://localhost:5173/__karpo (karpoDevtools({ path }) moves it). @karpo.dev/sdk-web installs the agent side automatically in a dev build, so nothing in the application has to import this package.

It must be served from the application's own origin — that is not a convenience. OPFS is origin-partitioned and the SQLite pool holds an exclusive handle, so only a same-origin page can reach the tab that owns the replica. A page hosted on the API gateway's port could never work.

The plugin is apply: "serve" only. There is no production build of the inspector, by design.

Entry points

| Import | What it gives you | | --- | --- | | @karpo.dev/devtools/vite | karpoDevtools(), the plugin | | @karpo.dev/devtools/agent | installAgent(host) — the in-app side, for a host that wires it manually | | @karpo.dev/devtools/protocol | The BroadcastChannel message types the two exchange |

Documentation

• Local development: https://karpo.dev/local-development
• Source: https://github.com/Chirich-GmbH/karpo-core (packages/devtools)