Visualize your React components as you interact with your application.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets (updated) README image asset Jan 27, 2018
chrome-ext (removed) re-rendering button for debugging Jan 27, 2018
.babelrc (added) .babelrc, .eslintrc, webpack.config.js Jan 20, 2018
.gitignore (added) UI styling Jan 25, 2018
.travis.yml (added) specific node version for travis Feb 6, 2018 (created) initial repo Jan 20, 2018 (updated) README image asset Jan 27, 2018
package-lock.json (updated) uglify-webpack-plugin Feb 6, 2018
package.json (updated) uglify-webpack-plugin Feb 6, 2018

React Scope

Visualize your React components as you interact with your application.

React Scope screenshot


  1. Install React Scope from Chrome web store.
  2. (Important) Install React Developer Tools if you haven't already.
  3. Enable "Allow access to file URLs" in the extension settings for React Scope.
  4. Run your React application.
  5. Open Chrome Developer Tools -> React Scope panel.


Hover over the nodes within the DOM tree visualization to see each component's state and props.

Use your app to make changes to state (e.g., trigger click events, submit data, etc.).

Every state change will update the visualization. You can click the next / prev buttons to navigate between current and previous states of your application.


This is an early stable release undergoing continuous development. Currently, this version is optimized for use in developing smaller-scale React applications.

If you experience duplicate state/props information being displayed, please try refreshing the page.


If you have suggestions or want to help make React Scope better, feel free to submit an issue or contact us at (Pull requests for typographical errors will likely be ignored.)

Check us out at


Kevin Gabinete -

Jonathan Lee -

Tiffany Lin -

Ringo Yip -

© React Scope 2018