Visualization tool for #Reactjs, with support for Fiber, Router (v4), and Redux

  • If you’d like to build your own version of React Sight: – – If you have any additional questions send us a message at reactsight@gmail.com 🙂 – – Hover over nodes to see their state and props in the side panel.
  • We built React Sight because there are no tools on the market that give you a visual representation of the structure of your App.
  • When we were developing our own projects, we wished we had a way to see how everything was structured.
  • We wanted React Sight to be simple to use, which is why all you have to do is install a Chrome extension.
  • If you’re interested in joining the React Sight team as a contributor, feel free to message one of us directly.

React-Sight – Visualization tool for React, with support for Fiber, Router (v4), and Redux

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux.

Make sure you’ve added React Dev Tools to Chrome.

Install React Sight from the Chrome web store

If you are running local file URLs, make sure to enable “Allow access to file URLs” in the extension settings for both React Dev Tools and React Sight

Run your React application, or open (almost!) any website running React!

Open Chrome Developer Tools (cmd+opt+j) -> React Sight panel

If you’d like to build your own version of React Sight:

dependancies

to generate the build

In Chrome, open the extensions tab and click ‘Load Unpacked Extension’. Load the folder ‘~/ReactSight/chrome-ext’

If you have any additional questions send us a message at reactsight@gmail.com 🙂

Hover over nodes to see their state and props in the side panel.

Hide DOM elements, Redux components, and Router components with the built in filters, so that you can focus only on the components you’ve written

Zoom in by double clicking, and zoom out by shift + double clicking (mousewheel zoom coming soon!)

We built React Sight because there are no tools on the market that…

GitHub