Realize for React

Realize for React

Visualize React state flow and component hierarchy

0 followers

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. Supports React v16.8
Realize for React gallery image
Realize for React gallery image
Launch tags:Developer ToolsGitHub
Launch Team
Framer
Framer
Launch websites with enterprise needs at startup speeds.
Promoted

What do you think? …

Horatiu Mitrea
Hi everyone, we're excited to launch Realize for react. It turns out when building a react application it is harder to have a map of how the components are connected with one another in a more visual way as well as seeing the state , props and children of an application. Because of that we decided to build a chrome/firefox extension that will allow anyone to view their react components in a tree like manner. This extension is best used in non-deployed application as opposed to deployed sties due to making the component structure pretty unreadable. To view the components, open the dev tools and scroll until you see the Realize extension. On a state change you'll see the components displayed on the left side of the screen and when clicking on one if it contains any state , props or children it will be displayed on the right panel. We can utilize the search component as well as to search for a specific component if you already know the name. The project is open source so if anyone wants to make any contribution here's our Github! and feel free to ask any questions. It currently supports React v.16.8 and above. Our extension works for Firefox as well as Chrome (however we're still pending approval :D )