Reactime: a Chrome panel that rewinds and diffs React state

It hooks React Fiber rather than reading state through React DevTools

The extension describes itself as a Chrome extension that enhances React development with time-travel debugging and advanced performance monitoring. The interesting mechanism is underneath that. Reactime uses the Fiber reconciler's global hook, which is the same `__REACT_DEVTOOLS_GLOBAL_HOOK__` interface React itself registers into for devtools, and subscribes to commit events. That is what lets it hold a history of state across component trees rather than a snapshot of the current tree only.

The repository topics spell out the dependency surface: `react-fiber`, `renderer`, `rendering`, `state-management`, `time-travel`, `performance`, `react-devtools`. Language is TypeScript, the licence is MIT, and the repository sits at 2240 stars with 210 forks and 12 open issues, last pushed on 2026-09-27.

The practical consequence of hooking Fiber is that Reactime sees the commit lifecycle, not your source code. It knows a component re-rendered and what its hooks returned, which is exactly what a profiler and a time machine need, and it also means it cannot tell you why a re-render was expensive in terms of your own code unless that information happens to be in the hooks.

Four views of the same recorded state

The README's Key Features section lists the visualization modes as a set: Component Graphs, JSON Trees, Performance Graphs, and Accessibility Trees. Alongside them sit a history timeline for tracking state changes over time, real-time web metrics, and accessibility insights captured per state change.

The most interesting pairing is the accessibility tree per snapshot. Capturing an accessibility tree at each recorded state change means you can diff what a screen reader would encounter before and after a specific interaction, which turns accessibility from a periodic audit into something you can inspect as part of debugging a bug. Restoring that visualization was one of the fixes called out in the 26.0 release notes.

npm run docs

Running that at the repository root serves generated documentation with interactive component diagrams, type definitions, an architecture overview and API references. A tool that pokes at another library's internals benefits a lot from having its own internals documented, and this repository takes that seriously enough to make typedoc part of the standard workflow rather than an afterthought.

Timejump and the provider/consumer view

The main panel is described through two selections on a dropdown. Timejump is the time machine: view and navigate the snapshot history of application state, jump to any point to see how state evolves across changes, or press play to replay each state change automatically. Playback speed is adjustable, and diffs between snapshots are supported.

Providers / Consumers is the second, and it is the one people do not expect from a debugging tool. It visualizes the context provider and consumer relationships in the application, which answers a question that is otherwise painful: which component is re-rendering because some distant provider's value changed identity. The 26.0 notes describe first-ever visualization of `useContext` hook state changes with clear mapping of provider to consumer and real-time monitoring of the context value.

Export and import round out the loop. Recorded snapshots can be saved as a JSON file and reloaded later, which means a state bug found in one session can be handed to a colleague or attached to a bug report as a reproducible artifact instead of a description. Cross-session comparison falls out of the same feature.

Prerequisites are stricter than the feature list suggests

The Getting Started section is short and worth reading carefully, because two of the three prerequisites will bite. Your React application must be running in development mode, React Developer Tools must be installed, and Chrome 80 or higher is recommended.

npm run build

The development mode requirement is not a stylistic choice. Production React builds omit the hook interface entirely, which is a deliberate design decision on React's part, and it means Reactime cannot attach to a production bundle no matter how it is configured. If you are chasing a bug that only reproduces in a production build, this tool cannot see it.

The React Developer Tools dependency is less obvious. Reactime builds on the same global hook that React DevTools installs, so the two extensions are complementary rather than competing: one provides the hook, the other consumes the richer event stream. Installing only Reactime leaves you without the thing it reads from.

The panel opens two ways. From Chrome DevTools, open the Reactime tab and it appears as a panel next to your other devtools. Or right-click anywhere in the React application and pick Reactime from the context menu, which opens it as a separate window. The second route is the one to reach for when you want the panel large while your devtools are busy.

Building it, and three demo apps to build it against

The `package.json` scripts describe a webpack extension build with separate production and development modes, plus a legacy pair that passes `NODE_OPTIONS=--openssl-legacy-provider` to work around older Node and webpack hash function errors.

  "scripts": {
    "build": "webpack --mode production",
    "dev": "cross-env NODE_ENV=development webpack --mode development --watch",
    "test": "jest --verbose --coverage",
    "test-backend": "jest --verbose --coverage src/backend",
    "test-frontend": "jest --verbose --coverage src/app",
    "docker-test-lint": "eslint --ext .js --ext .jsx src",
  }

The presence of both `test-backend` and `test-frontend` matches the two halves of the extension, one that talks to the page and one that renders the panel. There is a `jest.config.js` at the root, so there are real tests rather than a lint-only setup.

The repository tree carries three demo applications, `demo-app/`, `demo-app-next/` and `demo-app-remix/`, which line up with the modern framework support the README claims: Next.js, Remix, Recoil and Gatsby, plus TypeScript support for class and functional components and coverage of Hooks and the Context API. Being able to clone the repo, load a demo app in development mode and watch the panel fill up is the fastest way to understand what you are actually getting.

Project signals worth knowing before you commit to it

A few signals from the repository are more honest than the marketing in the README. The contributor list in `package.json` runs to dozens of names, which is unusual for a browser extension and suggests genuine community contribution rather than one team maintaining a side project. The README is translated, with Russian, French and Indonesian versions in the tree alongside `src/DEVELOPER_README.md`, and there is a `CONTRIBUTING.md`.

Against that, the release history is thin. Three releases are recorded, the most recent on 2025-01-08, with earlier ones in March 2024 and January 2024. The repository itself was pushed on 2026-09-27, so commits continue well after the last tagged release. Development-mode-only support, a reliance on React internals, and a browser extension distribution model all mean the thing that determines whether you can use it is React's own internals staying put, not this project's release cadence.

The README also carries a React Open Source Awards nomination badge from 2020 and a link to a Medium article about the reimagining that produced version 26. Both are period markers. The 26.0 notes are where the current behaviour is described: redesigned snapshot slider, variable playback speed, dark mode, restored accessibility tree, and fixes for connection persistence during idle time and for state capture on function-based `useState` hooks.

Editorial conclusion

Reactime's real contribution is not the performance charts, it is the history buffer. Anyone who has lost a state bug to a sequence of four interactions knows the missing feature in a browser devtool is being able to look backwards, and this extension hooks the React Fiber reconciler directly to keep that history and render it as a component graph, a JSON tree, an accessibility tree and a performance graph side by side. The costs are the ones you would expect from a Fiber hook: your app has to be in development mode, you need React Developer Tools installed alongside it, and support is scoped to what the reconciler exposes. The repository is MIT licensed, has an unusually long contributor list for a tool of its size, and ships three demo apps covering plain React, Next.js and Remix so you can see the panel populated before pointing it at your own code. Install it from the Chrome Web Store, open DevTools, click the Reactime tab, and drive your app.

Frequently asked questions

Official sources

1. License: MIT
2. open-source-labs/Reactime on GitHub
3. Project website
4. README
5. Releases