IdleKit

Appearance

@idlekitjs/devtools ​

Development tools for IdleKit games: a live debug overlay, runtime metrics and optional save actions.

Private package

@idlekitjs/devtools is private and not published to npm. It is only available inside the monorepo (games consume it through the workspace).

What it provides ​

  • devtools(options?), an Extension<T> that can be installed with engine.use(...).
  • DevMetrics, a DOM-free metrics helper used by the overlay.
  • DevtoolsOptions and DevtoolsExtension types.

When to use it ​

Use @idlekitjs/devtools during development to inspect frame rate, simulation tick rate, uptime and game-provided stats. Gate it behind a development flag when you do not want it in production bundles.

The extension is a no-op outside the browser.

Basic usage ​

ts
import { devtools } from "@idlekitjs/devtools";

engine.use(
  devtools<State>({
    stats: (state) => ({
      coins: Math.floor(state.coins),
      upgrades: state.upgrades.length,
    }),
  }),
);

With a SaveManager, the overlay can expose save and wipe actions:

ts
engine.use(
  devtools<State>({
    save,
    dispose: () => engine.dispose(),
  }),
);

dispose is used before wiping saved data so the running game cannot immediately save again during reload.

Boundaries ​

@idlekitjs/devtools is a development extension. It does not define gameplay rules, save policy, storage backends, rendering bindings or browser lifecycle behavior for production code.

The overlay injects its own browser DOM UI when document exists. Metrics are available through the extension's metrics property for inspection and tests.