A React component tree visualizer
As React applications scale, it becomes more difficult to track state and to have a holistic overview of the component hierarchy. Realize is a tool to help developers visualize the structure and state flow of their React applications, especially when they are growing in scale and complexity. It currently supports React v.16.8.
Prerequisites
Zoom & Pan - Hold down shift to enable dragging and zooming on the tree (to recenter just click the center button)
Component Focus - Click on a node to view state, props and children in the right and panel
State Flow - Click the 'state' toggle to show state flow on the tree. Stateful components have blue nodes and state flow is show by blue links
Search and Highlight - Enter a component name in the search bar to see all matching nodes pulsate
git clone https://github.com/oslabs-beta/Realize
npm i
from inside the root directorynpm build
build/extension
folder into your browser of choice:about:debugging#/runtime/this-firefox
and click Load Temporary Addonchrome://extensions/
toggle developer mode on and click Load UnpackedFan Shao - Github | LinkedIn
Harry Clifford - Github | LinkedIn
Henry Black - Github | LinkedIn
Horatiu Mitrea - Github | LinkedIn
You can contact us personally through our LinkedIn accounts (links above) or as a team via [email protected]
We would love for you to test out our extensions and submit any issues you encounter. Feel free to fork to your own repo and submit PRs. Some features we would like to add:
This project is licensed under the MIT License - see the LICENSE file for details