@kinem/devtools

Inspection, recording, and replay tools for kinem. Headless APIs that build on the core animation tracker, plus optional in-page overlay and timeline UI widgets.

Importing this package turns on the core tracker as a side effect. The tracker is off by default in production play() calls, so the runtime cost is opt-in by importing here.

import { mountInspector, mountTimeline, snapshot } from "@kinem/devtools"

// One-shot snapshot of every running animation.
console.log(snapshot())

// Floating panel of running animations.
mountInspector({ position: "bottom-right" })

// Scrubbable timeline strip.
mountTimeline({ position: "bottom" })

Install

pnpm add @kinem/devtools @kinem/core

@kinem/core is a peer dependency.

What's exported

• snapshot() and AnimationSnapshot / InspectorSnapshot types
• mountInspector() floating panel
• mountTimeline() scrubbable timeline strip
• createRecorder() event log for replay

@kinem/core exports trackNamed(name) for ambient features that don't go through play(). The returned function unregisters the entry. Use it to give a hand-rolled rAF loop or a gesture state machine a readable title in any of the panels above.

For the standalone Chrome DevTools panel that consumes the same tracker, see packages/devtools-extension.

Docs

Full guide and API reference in the main repo.

License

Dual licensed under Apache 2.0 or MIT.