React-Map

About

React-Map is a Chrome DevTools extension that helps you understand React app structure faster by turning the Fiber tree into an interactive component map.

Built for debugging and architecture exploration, React-Map shows your component hierarchy in real time whenever React commits updates, so you can quickly see how components are connected.

Key features:
* Real-time React component tree visualization in a dedicated DevTools panel.
* Search and jump to specific components.
* Pin a component to keep it tracked across updates.
* Live inspection of pinned component state and props.
* Tree filters to hide DOM, Router, or Redux-related nodes.
* Layout controls for orientation and node spacing.

How it works:
React-Map reads data from the React DevTools global hook and renders it as a visual hierarchy. It is designed for local React debugging workflows and currently targets localhost environments.

Requirements:
* React Developer Tools must be installed and enabled for React-Map to work.

Privacy:
All processing happens locally in your browser DevTools context. React-Map does not require an account and does not send your component tree to external servers.

This extension requires permissions to access the page's React tree, but it does not transmit any data remotely. It is fully open source, and you can find its source code at https://github.com/AchmadAkif/react-map.