{"id":14958054,"url":"https://github.com/react-sight/react-sight","last_synced_at":"2025-04-14T11:22:22.481Z","repository":{"id":38815423,"uuid":"104247788","full_name":"React-Sight/React-Sight","owner":"React-Sight","description":"Visualization tool for React, with support for Fiber, Router (v4), and Redux","archived":false,"fork":false,"pushed_at":"2023-01-06T02:01:22.000Z","size":8651,"stargazers_count":2857,"open_issues_count":50,"forks_count":118,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-10-29T17:11:46.818Z","etag":null,"topics":["chrome","component-hierarchy","developer-tools","hacktober","hacktoberfest","javascript","react","react-component","react-fiber","react-redux","react-router","react-router-v4","reactjs","redux","visualization"],"latest_commit_sha":null,"homepage":"http://www.reactsight.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/React-Sight.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-20T17:38:37.000Z","updated_at":"2024-10-22T14:12:22.000Z","dependencies_parsed_at":"2023-02-05T02:17:01.157Z","dependency_job_id":null,"html_url":"https://github.com/React-Sight/React-Sight","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/React-Sight%2FReact-Sight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/React-Sight%2FReact-Sight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/React-Sight%2FReact-Sight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/React-Sight%2FReact-Sight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/React-Sight","download_url":"https://codeload.github.com/React-Sight/React-Sight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248869089,"owners_count":21174817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","component-hierarchy","developer-tools","hacktober","hacktoberfest","javascript","react","react-component","react-fiber","react-redux","react-router","react-router-v4","reactjs","redux","visualization"],"created_at":"2024-09-24T13:16:06.643Z","updated_at":"2025-04-14T11:22:22.449Z","avatar_url":"https://github.com/React-Sight.png","language":"JavaScript","readme":"[![Coverage Status](https://coveralls.io/repos/github/React-Sight/React-Sight/badge.svg?branch=master)](https://coveralls.io/github/React-Sight/React-Sight?branch=master)\n[![Maintainability](https://api.codeclimate.com/v1/badges/a7c8e7cd0346c45cc7c6/maintainability)](https://codeclimate.com/github/React-Sight/React-Sight/maintainability)\n[![Build Status](https://travis-ci.org/React-Sight/React-Sight.svg?branch=master)](https://travis-ci.org/React-Sight/React-Sight)\n[![Chrome Web Store](https://img.shields.io/chrome-web-store/users/aalppolilappfakpmdfdkpppdnhpgifn.svg)](https://chrome.google.com/webstore/detail/react-sight/aalppolilappfakpmdfdkpppdnhpgifn)\n[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/aalppolilappfakpmdfdkpppdnhpgifn.svg)](https://chrome.google.com/webstore/detail/react-sight/aalppolilappfakpmdfdkpppdnhpgifn)\n![Mozilla Add-on](https://img.shields.io/amo/v/react-sight)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n_**Note: project isn't actively maintained. If you would like to maintain, feel free to submit PRs or reach out to @davidcsally**_\n_**I also suggest installing it as click-to-run or inside its own chrome profile, so that it doesn't slow down regular browsing**_\n\n\n# React Sight\n\u003cimg src=\"/assets/sidewaylogo4.png\" width=\"300\"/\u003e\n\u003cbr /\u003e\n\nReact 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!_\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/assets/testingDEMO.gif\"\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\n## Set Up | Install From the Chrome Store\n\n1. Make sure you've added [React Dev Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) to Chrome. \n1. Install [React Sight](https://chrome.google.com/webstore/detail/react-sight/aalppolilappfakpmdfdkpppdnhpgifn) from the Chrome web store\n1. 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\n1. Run your React application, or open (almost!) any website running React!\n1. Open Chrome Developer Tools (cmd+opt+j) -\u003e React Sight panel\n\n## Set Up |  Firefox\nThis is the same as Chrome, except you will use the addons from the Firefox website\n\n1. Add [React Dev Tools](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/?src=search)\n1. Add [React Sight](https://addons.mozilla.org/en-US/firefox/addon/react-sight/) from the Firefox addons website. \n\n## Building Your Own Version\n\nIf you'd like to build your own version of React Sight from the source code, follow these steps:\n\n1. Clone the repo and run `yarn install` or `npm install` to install dependencies.\n1. Use `yarn build` to generate the build.\n\n### Adding to Chrome\n1. Open Chrome and go to the extensions page\n1. Toggle developer mode in the upper right corner if necessary\n1. Click 'Load unpacked'\n1. Load the folder `~/ReactSight/build/extension`\n\n### Firefox \n\n1. Load the extension as a \"Temporary Extension\" by navigating to: `about:debugging#/runtime/this-firefox`\n1. Click \"Load Temporary Add-on\"\n1. Load the file `~/ReactSight/build/extension/manifest.json`. In Firefox, you load the extension's manifest instead of the extension's folder\n\nIf you have any additional questions send us a message at reactsight@gmail.com :)\n\n## Usage\n\nHover over nodes to see their state and props in the side panel. \n\nHide DOM elements, Redux components, and Router components with the built in filters, so that you can focus only on the components you've written\n\nZoom in by double clicking, and zoom out by shift + double clicking (mousewheel zoom coming soon!)\n\n## Why?\n\nWe 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.\n\nWe wanted React Sight to be simple to use, which is why all you have to do is install a Chrome extension. No modifying your existing code!\n\n## How Does It Work?\n\nWhen the dev tools are opened, React-Sight searches for React renderer's, and patches the render to collect data on each state change.\n\nData is posted to the Window, where it is read by Chrome's background.js window, and is then relayed to React-Sight's devTools page.\n\nThe raw data is then processed and fed to D3, where it is displayed to the user.\n\n## Troubleshooting\n\n***In React16 you will need to trigger a render to have your application show up. The data is not exposed until React's renderer is called.***\n\n'React not found' or no data:\n\nSometimes React-Sight doesn't get a snapshot of the data at load, triggering a setState ussually fixes this\n\nMaximum call stack exceeded and other console errors:\n\nThis is a bug where the parsing functions get stuck in an infinite loop. We are working on a fix.\n\n## Testing\n\nRun `yarn test` to run the test suite. Tests are run using `jest`.\n\n## Contributing\n\nFound a bug? Have a suggestion? Want to make React-Sight better?\n\nPlease submit issues/pull requests if you have feedback or would like to contribute. If you're interested in joining the React Sight team as a contributor, feel free to message one of us directly, or just start submitting pull requests!\n\n## Authors\n\nDavid C Sally (https://github.com/davidcsally)\n\nGrant Kang (https://github.com/Grant05)\n\nWilliam He (https://github.com/hewilliam)\n\n## Contact\n\nLike our app? Found a bug? \n\nTell us what you think!\n\nreactsight@gmail.com\n\nVisit us at www.reactsight.com\n\n## Roadmap \n\nHere's our top development priorities\n\n1. Better support across on React 16+.\n1. More consistent detection of root nodes when React Sight is opened.\n1. Support for multiple React Applications / mounting nodes, currently it picks the first React application in the renderers list.\n1. More robust error handling and guard blocks for extracting state, props, and store\n1. Logging / Debugging mode for development, feedback, and error reporting\n1. Performance and stability updates\n1. UX improvements\n1. Improved documentation\n1. Hook into the react-devtools-backend so that we don't have to reimplement it :)\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE.md file for details\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-sight%2Freact-sight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-sight%2Freact-sight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-sight%2Freact-sight/lists"}