# team-gryff/react-monocle

A developer tool to visualize a React application's component hierarchy.

Repository: https://github.com/team-gryff/react-monocle
Canonical: https://ross.abutalabs.com/products/react-monocle
Language: JavaScript
License: MIT
License Family: permissive
Topics: react, component-hierarchy, developer-tools, visualization, redux, ast
Archived: true
Last push: 2017-05-09T00:34:51+00:00

## Health v2 (maintenance only)
Score: 10/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 3722, "days_push": 3404, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases, archived
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 2437, forks 74 (observed 2026-08-28T04:06:51.473322+00:00)

## What it is
React Monocle is a CLI developer tool that parses React source files and generates a visual tree graph of the app's component hierarchy, displayed alongside a live copy of the application. It injects wrappers around setState calls in an un-minified bundle to show real-time state changes and data flow, with Redux syncing the tree to component state.

## Use cases
- visualize my react app's component hierarchy
- see how state flows through react components in real time
- generate a component tree diagram from react source files
- debug react state changes with a visual tree
- understand a large react codebase's structure
- view redux state changes reflected in a component graph

## When to choose
- you work on a React (with Redux) app and want a visual map of components and state flow
- you have access to an un-minified bundle file and can run a CLI tool
- you're exploring or onboarding onto an unfamiliar React codebase

## When to avoid
- your bundle is minified/mangled, since the tool requires un-minified bundles
- you use a modern React stack without Redux or with hooks-era patterns the 2017-era tool doesn't support
- you need an actively maintained tool - the last release was in 2017
- you prefer a browser DevTools extension over a CLI-launched visualization

## Facets
- artifact type: cli-tool
- maturity: abandoned
- function: developer-tools, data-visualization, parser
- domain: frontend, web-development, developer-tools, data-visualization
- platform: cli, cross-platform
- tags: react, component-hierarchy, redux, ast-parsing, d3, state-visualization, nodejs

## Member repositories
- team-gryff/react-monocle (main) score 10

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:06:51.473322+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T02:31:00.816949+00:00, confidence not recorded.
  - readme: https://github.com/team-gryff/react-monocle (fetched 2026-08-28T04:06:51.473322+00:00, sha e9e84fd7d5df)
  - registry_npm: https://registry.npmjs.org/react-monocle (fetched 2026-08-29T10:12:33.755684+00:00, sha 713018205b58)
- Data as of 2026-08-30T08:39:29.467469+00:00.