Pure TypeScript replay engine for render telemetry — navigate recorded render sessions frame-by-frame with immutable cursors, filter by preset, bookmark frames, and inspect prop diffs without any React dependency.
Install: pnpm add @sapanmozammel/render-replay-engine
Build a ReplayEngine from a synthetic event sequence, then step through each frame with next() and previous(). See the immutable ReplayCursor advance through renderNumber, score, and prop changes.
import {
createReplayEngine,
buildReplaySessions,
fromEvents,
fromBuffer,
fromSerialized,
applyPreset,
} from '@sapanmozammel/render-replay-engine';
// 1. Build engine from any source
const engine = createReplayEngine(fromEvents(events));
// or: fromBuffer(telemetryBuffer), fromSerialized(jsonString)
// 2. Navigate with immutable cursors
let cursor = engine.navigate.atStart();
cursor = engine.navigate.next(cursor) ?? cursor;
cursor = engine.navigate.jumpToRender(cursor, 5) ?? cursor;
// 3. Read the current frame
const frame = engine.getFrame(cursor.frameIndex);
// frame.score, frame.signalKind, frame.hasUnstableProps
// frame.propChangeEvent?.changed, frame.propChangeEvent?.unstable
// 4. Filter to frames of interest
const result = engine.applyPreset('issues-only');
// result.matchingFrameCount, result.matchingFrameIndices
const next = engine.navigate.nextMatching(cursor, { maxScore: 69 });
// 5. Bookmark frames
const bm = engine.bookmarks.create({
frameIndex: cursor.frameIndex,
sessionId: engine.session.id,
label: 'Investigate this render',
});
engine.navigate.jumpToBookmark(bm.id);
// 6. Multi-session: inspect all sessions, then pick one
const sessions = buildReplaySessions(fromBuffer(buffer));
const engine2 = createReplayEngine(fromBuffer(buffer), sessions[0].id);Pure TypeScript, zero runtime dependencies. Works in any environment — no React peer dependency. Pair with render-telemetry-core to capture events from live components.