Download
React Sight requires React Dev Tools for reading information about your App. Simply add to Chrome if you don't have it installed. Open your React application, or open (almost!) any website running React! React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux. Now with support for Firefox! 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 (mouse wheel zoom coming soon!) 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.
Features
- Open the Chrome Developer Tools and click the react sight panel
- Install React Sight from the Chrome web store
- For local projects, check 'Allow access to file URLs' on the extensions page
- React Sight requires NO modification to your codebase
- React-Sight supports React 14.7+
- React-Sight is light-weight and unobtrusive, and will show you how your app is working
Project Samples
