Realize
Browser extension to visualize React state flow and component hierarchy

About

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.

Installation

  • Install the extension (Firefox, Chrome pending)
  • Navigate to your React website
  • Open the dev tools window and select the Realize Panel
  • Trigger a state change to see the component tree populate

Demo

Authors

Fan

Github     |    LinkedIn
Harry

Github     |    LinkedIn
Henry

Github     |    LinkedIn
Horatiu

Github     |    LinkedIn

Contribute!

We would love for you to test out our extension and submit any issues you encounter. Feel free to fork to your own repo and submit PRs. Some features we would like to add:

  • Performance data on render times
  • Expanding/collapsing nodes
  • Autocomplete on search
Follow @Realize   Star