# open-source-labs/reactime

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/open-source-labs-reactime).**

2,238 stars · 209 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/open-source-labs/Reactime
- Homepage: https://reactimetravel.github.io/reactime-website/
- awesome-repositories: https://awesome-repositories.com/repository/open-source-labs-reactime.md

## Topics

`accessibility` `chrome-extension` `devtools-extension` `gatsby` `nextjs` `performance` `react-devtools` `react-fiber` `reactjs` `remixjs` `renderer` `rendering` `state-management` `time-travel`

## Description

Reactime is a browser extension designed for debugging and profiling React applications. It provides a specialized interface for monitoring component hierarchies, tracking state transitions, and analyzing data flow within complex component trees.

The tool distinguishes itself through time-travel debugging capabilities, which allow developers to capture and replay state snapshots to isolate logic errors. It also features a dependency graph mapper that visualizes the relationships between providers and consumers, clarifying how information is distributed throughout an application.

Beyond core debugging, the project includes performance monitoring utilities that measure render durations and frequencies to identify bottlenecks. It supports collaborative workflows by enabling the export and import of state history files, allowing teams to share and analyze specific application states across different sessions.

## Tags

### Development Tools & Productivity

- [State Debugging Tools](https://awesome-repositories.com/f/development-tools-productivity/state-debugging-tools.md) — Provides development tools for monitoring and inspecting application state and data flow.
- [Frontend State Tracking](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/frontend-state-tracking.md) — Monitors changes in frontend store managers and application state for debugging purposes. ([source](https://github.com/open-source-labs/reactime#readme))
- [React Render Debugging](https://awesome-repositories.com/f/development-tools-productivity/react-render-debugging.md) — Tracks the specific props and state changes that trigger component updates.
- [Time-Travel Debuggers](https://awesome-repositories.com/f/development-tools-productivity/time-travel-debuggers.md) — Records and replays state transitions to allow developers to move backward and forward through application history. ([source](https://github.com/open-source-labs/reactime#readme))

### Part of an Awesome List

- [Monitoring and Performance](https://awesome-repositories.com/f/awesome-lists/devtools/monitoring-and-performance.md) — Tracks performance metrics and site health to identify bottlenecks. ([source](https://github.com/open-source-labs/reactime#readme))

### Software Engineering & Architecture

- [State Snapshots](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/persistence-and-serialization/state-serialization/state-snapshots.md) — Captures and reconstructs full application data structures to enable time-travel debugging.
- [Component Lifecycle Hooks](https://awesome-repositories.com/f/software-engineering-architecture/component-lifecycle-hooks.md) — Executes callbacks during the addition, removal, or modification of data components in a system.
- [Software Dependency Mapping](https://awesome-repositories.com/f/software-engineering-architecture/dependency-graph-visualizations/software-dependency-mapping.md) — Maps codebases as graphs of functions and classes to analyze architectural structure.
- [Dependency-Injected Contexts](https://awesome-repositories.com/f/software-engineering-architecture/dependency-injected-contexts.md) — Shares type-checked configuration state across a call chain using dependency injection. ([source](https://github.com/open-source-labs/reactime#readme))

### System Administration & Monitoring

- [Runtime State Visualizers](https://awesome-repositories.com/f/system-administration-monitoring/application-performance-monitoring/application-performance-monitoring/real-time-application-performance-monitors/runtime-state-visualizers.md) — Provides visual representations of the current application state and system metrics during execution. ([source](https://github.com/open-source-labs/reactime#readme))
- [Application Performance Profiling](https://awesome-repositories.com/f/system-administration-monitoring/performance-monitoring-tools/application-performance-profiling.md) — Identifies performance bottlenecks and measures execution time within an application environment.
- [Performance Observer Tracking](https://awesome-repositories.com/f/system-administration-monitoring/performance-observer-tracking.md) — Enables asynchronous monitoring of browser performance entries using the native PerformanceObserver API.

### Testing & Quality Assurance

- [React Performance Optimization](https://awesome-repositories.com/f/testing-quality-assurance/react-performance-optimization.md) — Identifies and reduces unnecessary render cycles to improve application speed.

### User Interface & Experience

- [React State Visualizers](https://awesome-repositories.com/f/user-interface-experience/data-display-components/tree-view-visualizers/debugger-state-visualizers/react-state-visualizers.md) — Displays a live component tree showing props and state for every component in an application.
- [State Flow Visualizers](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components/component-interaction-management/state-flow-visualizers.md) — Provides interactive displays of component trees showing props and state to trace parent-child data relationships.