React Sight

screenshot of React Sight
react
scss

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

Overview

React Sight is a tool that provides a live view of the component hierarchy tree of React applications, complete with support for React Router and Redux. It offers a visual representation of the structure of the app to help developers understand how components are organized without modifying any existing code. The tool is available as a Chrome extension and now also supports Firefox.

Features

  • Live Component Hierarchy: Visual representation of the component hierarchy tree.
  • Support for React Router and Redux: Includes support for React Router and Redux components.
  • Interactive Node Information: Hover over nodes to view their state and props in a side panel.
  • Built-In Filters: Hide DOM elements, Redux components, and Router components for better focus.
  • Zoom Functionality: Zoom in by double-clicking, zoom out by Shift + double-clicking.
  • Easy Installation: Simple setup process requiring only the installation of a Chrome extension.

Chrome Extension

  1. Add React Dev Tools to Chrome.
  2. Install React Sight from the Chrome Web Store.
  3. Ensure "Allow access to file URLs" is enabled in the extension settings for React Dev Tools and React Sight.
  4. Open Chrome Developer Tools (cmd+opt+j) and access the React Sight panel.

Firefox Add-on

  1. Add React Dev Tools to Firefox.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.