{"id":15020729,"url":"https://github.com/open-source-labs/recoilize","last_synced_at":"2025-05-15T17:06:47.011Z","repository":{"id":39896793,"uuid":"273597240","full_name":"open-source-labs/Recoilize","owner":"open-source-labs","description":"A Chrome Dev tool for debugging applications built with the experimental Recoil.js state management library.","archived":false,"fork":false,"pushed_at":"2023-05-18T17:10:43.000Z","size":137866,"stargazers_count":606,"open_issues_count":23,"forks_count":93,"subscribers_count":18,"default_branch":"staging","last_synced_at":"2025-05-15T17:06:38.723Z","etag":null,"topics":["d3","eslint","google-chrome-extension","javascript","node","react","recoil","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/open-source-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-06-19T22:26:23.000Z","updated_at":"2025-05-04T05:57:05.000Z","dependencies_parsed_at":"2024-02-04T19:44:14.538Z","dependency_job_id":null,"html_url":"https://github.com/open-source-labs/Recoilize","commit_stats":{"total_commits":776,"total_committers":38,"mean_commits":20.42105263157895,"dds":0.8724226804123711,"last_synced_commit":"cc091c3a07c61957a7263a828a43a6e585d318dd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FRecoilize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FRecoilize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FRecoilize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FRecoilize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/open-source-labs","download_url":"https://codeload.github.com/open-source-labs/Recoilize/tar.gz/refs/heads/staging","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254384988,"owners_count":22062422,"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":["d3","eslint","google-chrome-extension","javascript","node","react","recoil","typescript","webpack"],"created_at":"2024-09-24T19:55:30.768Z","updated_at":"2025-05-15T17:06:42.002Z","avatar_url":"https://github.com/open-source-labs.png","language":"TypeScript","readme":"\u003cmeta name='keywords' content='Recoil, Recoil.js, Recoil Dev Tool, Recoilize, Chrome Dev Tool, Recoil Chrome'\u003e\n\n\u003ca id=\"readme-top\"\u003e\u003c/a\u003e\n\n\n\u003cdiv align='center'\u003e\n\n[![Contributors][contributors]][contributors-url] \n[![chrome version][chrome-v]][chrome-url]\n[![npm version][npm-v]][npm-url]\n[![GitHub license][license]][license-url] \n![PRs Welcome][PRs]\n\n\u003c/div\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./src/extension/build/assets/cover-photo-logo-recoilize.jpg' width=100%\u003e\n\u003c/p\u003e\n\n\n# A Dev Tool for Recoil Applications\n\n#### [Dev README](src/README.md) - This guide supports developers interested in iterating on the project by providing essential information and guidelines for contributing and improving the project's development.\n\n\u003cbr /\u003e\n\n# About\n\n\u003c!-- \u003cdiv align='center'\u003e --\u003e\n\n[![Typescript][TS.js]][TS-url]\n[![JavaScript][JavaScript]][JavaScript-url]\n[![React][React.js]][React-url]\n[![Redux][Redux]][Redux-url]\n[![RTK][RTK]][RTK-url]\n[![D3][D3.js]][d3-url]\n[![Node][Node.js]][Node-url]\n[![Jest][Jest]][Jest-url]\n[![Testing][Testing-Library]][Testing-Library-url]\n[![Git][Git]][Git-url]\n[![HTML5][HTML5]][HTML5-url]\n[![CSS3][CSS3]][CSS3-url]\n\n\u003c!-- \u003c/div\u003e --\u003e\n\n\u003cbr /\u003e\n\nRecoilize is a Chrome Dev Tool designed for debugging applications built with the Recoil.js state management library.\n\nThe tool records Recoil state and allows users to easily debug their applications with features such as time travel to previous states, visualization of the component graph and display of the atom selector network.\n\n\u003cbr /\u003e\n\n## Download the Google Chrome Extension \n\n\u003cbr /\u003e\n\nDownload Recoilize from the [Chrome Store][chrome-url]\n\nVisit the Recoilize [landing page](https://www.recoilize.io/) to demo\n\n\u003cbr /\u003e\n\n# Installation\n## Standard Installation:\n\u003cbr /\u003e\nFor installation in applications using React.js, follow the instructions below.\n\n\u003cbr /\u003e\n\nInstall Recoilize Module (only available as an npm package)\n```js\nnpm install recoilize\n```\n\u003cbr /\u003e\n\nImport RecoilizeDebugger from the Recoilize module\n\n```js\nimport RecoilizeDebugger from 'recoilize';\n```\n\u003cbr /\u003e\n\nIntegrate RecoilizeDebugger as a React component within the recoil root:\n\n```js\nimport RecoilizeDebugger from 'recoilize';\nimport RecoilRoot from 'recoil';\n\nconst root = createRoot(document.getElementById(\"root\"));\n\nroot.render(\n  \u003cRecoilRoot\u003e\n    \u003cRecoilizeDebugger /\u003e\n    \u003cApp /\u003e\n  \u003c/RecoilRoot\u003e,\n);\n```\n\n*Please note, Recoilize assumes that the HTML element used to inject your React application **has an ID of 'root'**. If it does not, the HTML element must be passed in as an attribute called 'root' to the RecoilizeDebugger component*\n\n**Example:**\n\n```js\nimport RecoilizeDebugger from 'recoilize';\nimport RecoilRoot from 'recoil';\n\n//If your app injects on an element with ID of 'app'\nconst app = document.getElementById('app');\n\nconst root = createRoot(app);\n\nroot.render(\n  \u003cRecoilRoot\u003e\n    \u003cRecoilizeDebugger root={app} /\u003e\n    \u003cApp /\u003e\n  \u003c/RecoilRoot\u003e,\n  app,\n);\n```\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n## Using Next.js:\nIn order to integrate Next.js applications with RecoilizeDebugger, follow the example below. \n\n```js\n//If your application uses Next.js modify the _app.js as follows\nimport dynamic from 'next/dynamic';\nimport { useEffect, useState } from 'react';\nimport { RecoilRoot } from 'recoil';\n\nfunction MyApp({ Component, pageProps }) {\n\n  const [root, setRoot] = useState(null)\n  const RecoilizeDebugger = dynamic(\n\t() =\u003e {\n\t  return import('recoilize');\n\t},\n\t{ ssr: false}\n  );\n\n  useEffect(() =\u003e {\n\n    if (typeof window.document !== 'undefined') {\n      setRoot(document.getElementById('__next'));\n    }\n  }, [root]);\n \n  return (\n    \u003c\u003e\n    \u003cRecoilRoot\u003e\n      \u003cRecoilizeDebugger root = {root}/\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/RecoilRoot\u003e\n    \u003c/\u003e\n  );\n}\n\n\nexport default MyApp;\n\n```\n\u003cbr /\u003e\n\u003cbr /\u003e\n\nOnce you have completed the steps above, open your application in Chrome, select the Recoilize Chrome extension*, refresh the page**, and you're ready to start debugging with Recoilize!\n\n\u003cbr /\u003e\n\n##### **The Chrome Extension is only supported with React applications using Recoil as state management*\n\n##### ***note that you may need to refresh your page before the extension registers that the Recoilize npm package has been installed within the application. This is a known bug that needs to be addressed*\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n# Updates for Version 3.2.0\n\n### \u003cu\u003eManifest 3\u003c/u\u003e\n\nGoogle is transitioning Chrome Extensions to Manifest v3. Soon, Manifest v2 will be phased out, and only extensions using Manifest v3 will be accepted and listed in the Chrome store. Because of this, one of the primary focuses for Recoilize 3.2 was to update the Chrome Extension to Manifest v3. With this update, users will still be able to utilize this amazing tool, as it has now been updated and complies with Manifest v3 requirements.\n\n\u003cbr /\u003e\n\n### \u003cu\u003eReact 17 and 18 Compatibility\u003c/u\u003e\n\nRecoilize is now compatible with React 17 and 18. \n\n\u003cbr /\u003e\n\n### \u003cu\u003eSupport for Recoil 0.7.7\u003c/u\u003e\n\nRecoilize now supports the most recent update to the Recoil library and is backwards compatible with older versions of Recoil.\n\n\u003cbr /\u003e\n\n### \u003cu\u003eUnder the Hood\u003c/u\u003e\n* Deprecated dependencies have been updated\n* The version of React used to build the Recoilize Chrome Extension has been updated to v17\n* Increased testing coverage\n* Cleaner codebase for improved readability\n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n\n# Features \n### \u003cu\u003eAtom Network\u003c/u\u003e\n\nEasily visualize the relationship between atoms and selectors (the bread and butter of Recoil.js) with the use of the Atom Network.\n\n\u003cbr /\u003e\n\n\u003cp align='center'\u003e \n\u003cimg src='./src/extension/build/assets/atomNetwork-gif.gif' width=600 height=300/\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n### \u003cu\u003eSnapshot Comparison\u003c/u\u003e\n\nOptimizing your app is key. Component rendering time can be difficult to keep track of if you have a long series of snapshots, and render time can vary depending on the browser and device used. Users can save a series of state snapshots and use it later to analyze and compare with the most up to date series.\n\n\u003cbr /\u003e\n\n\u003cp align='center'\u003e \n\u003cimg src='./src/extension/build/assets/snapshotcomparison-gif.gif' width=600 height=300/\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n### \u003cu\u003eTime Travel with ease\u003c/u\u003e\n\nUsers may travel through their snapshot history with the use of a slider or buttons.\n\n\u003cbr /\u003e\n\n\u003cp align='center'\u003e \n\u003cimg src='./src/extension/build/assets/timeslider-gif.gif' width=600 height=300/\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n### \u003cu\u003eCustomizable Component Graph\u003c/u\u003e\n\nThe component graph allows users to visualize the relationship between components and how they are rendered.\n\nUsers have the ability to customize how they view the component graph. Components can be expanded or collapsed, and can also be displayed horizontally or vertically, depending on the users preference.\n\n\u003cbr /\u003e\n\n\u003cp align='center'\u003e \n\u003cimg src='./src/extension/build/assets/componentTree-gif.gif' width=600 height=300/\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n### \u003cu\u003ePerformance Metrics\u003c/u\u003e\n\nIn 'Metrics' tab, two graphs display component render times.\n\nThe flame graph displays the time a component took to render itself, and all of its child components. The bar graph displays the individual render times of each component.\n\n\u003cbr /\u003e\n\n### \u003cu\u003eThrottle\u003c/u\u003e\n\nIn the settings tab, users are able to set throttle (in milliseconds) for large scale applications or any applications that changes state rapidly. The default is set at 70ms.\n\n\u003cbr /\u003e\n\n### \u003cu\u003eState Persistence\u003c/u\u003e\n\nRecoilize allows the users to persist their application's state through a refresh or reload. At this time, the user is able to view the previous states in the dev tool, but cannot time travel to the states before refresh.\n\n\u003cbr /\u003e\n\n### \u003cu\u003eAdditional Features\u003c/u\u003e\n\n* legend to see relationship between component graph and state\n* toggle to view raw component graph\n* filter atom/selector network relationship\n* filter snapshots by atom/selector keys\n\n\u003cbr /\u003e\n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n# Contributors\n\nBren Yamaguchi [ [github](https://github.com/brenyama)  | [linkedin](https://www.linkedin.com/in/brenyamaguchi/) ]\n\nSaejin Kang [ [github](https://github.com/skang1004) | [linkedin](https://www.linkedin.com/in/saejinkang1004/) ]\n\nJonathan Escamila [ [github](https://github.com/jonescamilla) | [linkedin](https://www.linkedin.com/in/jon-escamilla/) ]\n\nSean Smith [ [github](https://github.com/SmithSean17) | [linkedin](https://www.linkedin.com/in/sean-smith17/) ]\n\nJustin Choo [ [github](https://github.com/justinchoo93) | [linkedin](https://www.linkedin.com/in/justinchoo93/) ]\n\nAnthony Lin [ [github](https://github.com/anthonylin198) | [linkedin](https://www.linkedin.com/in/anthony-lin/) ]\n\nSpenser Schwartz [ [github](https://github.com/spenserschwartz) | [linkedin](https://www.linkedin.com/in/spenser-schwartz/) ]\n\nSteven Nguyen [ [github](https://github.com/Steven-Nguyen-T) | [linkedin](https://www.linkedin.com/in/steven-nguyen-t/) ]\n\nHenry Taing [ [github](https://github.com/henrytaing) | [linkedin](https://www.linkedin.com/in/henrytaing/) ]\n\nSeungho Baek [ [github](https://github.com/hobaek) | [linkedin](https://www.linkedin.com/in/s2unghobaek/) ]\n\nAaron Yang [ [github](https://github.com/aaronyang24) | [linkedin](https://www.linkedin.com/in/aaronyang24/) ]\n\nJesus Vargas [ [github](https://github.com/jmodestov) | [linkedin](https://www.linkedin.com/in/jesus-modesto-vargas/) ]\n\nDavide Molino [ [github](https://github.com/davidemmolino) | [linkedin](https://www.linkedin.com/in/davide-molino/) ]\n\nTaven Shumaker [ [github](https://github.com/TavenShumaker) | [linkedin](https://www.linkedin.com/in/Taven-Shumaker/) ]\n\nJanis Hernandez [ [github](https://github.com/Janis-H) | [linkedin](https://www.linkedin.com/in/janis-h/) ]\n\nJaime Baik [ [github](https://github.com/jaimebaik) | [linkedin](https://www.linkedin.com/in/jaime-baik/) ]\n\nAnthony Magallanes [ [github](https://github.com/amagalla) | [linkedin](https://www.linkedin.com/in/anthony-magallanes/) ]\n\nEdward Shei [ [github](https://github.com/calibeach) | [linkedin](https://www.linkedin.com/in/edwardshei/) ]\n\nNathan Bargers [ [github](https://github.com/nbargers) | [linkedin](https://www.linkedin.com/in/nathan-bargers/) ]\n\nScott Campbell [ [github](https://github.com/thisisscottcampbell) | [linkedin](https://www.linkedin.com/in/thisisscottcampbell/) ]\n\nSteve Hong [ [github](https://github.com/stevehong423) | [linkedin](https://www.linkedin.com/in/stevehongpa/) ]\n\nJason Lee [ [github](https://github.com/j4s0n1020) | [linkedin](https://www.linkedin.com/in/jasonjml/) ]\n\nRazana Nisathar [ [github](https://github.com/razananisathar) | [linkedin](http://www.linkedin.com/in/razananisathar) ]\n\nHarvey Nguyen [ [github](https://github.com/harveynwynn) | [linkedin](https://www.linkedin.com/in/harveynwynn) ]\n\nJoey Ma [ [github](https://github.com/yoyoyojoe) | [linkedin](https://www.linkedin.com/in/joeyma) ]\n\nLeonard Lew [ [github](https://github.com/leolew97) | [linkedin](https://www.linkedin.com/in/leonardlew) ]\n\nVictor Wang [ [github](https://github.com/wangvwr) | [linkedin](https://www.linkedin.com/in/wangvwr) ]\n\nAdam Allison [ [github](https://github.com/allisonadam81) | [linkedin](https://www.linkedin.com/in/allisonadam81/) ]\n\nWilliam Chu [ [github](https://github.com/wi11chu) | [linkedin](https://www.linkedin.com/in/williamchu9/) ]\n\nJordan Rice [ [github](https://github.com/JordanMRice) | [linkedin](https://www.linkedin.com/in/theoriginaljordanrice/) ]\n\nRyan Wallace [ [github](https://github.com/RWallie) | [linkedin](https://www.linkedin.com/in/rwallie/) ]\n\nAlejandro Florez [ [github](https://github.com/AlejandroFlorez) | [linkedin](https://www.linkedin.com/in/florezalejandro/) ]\n\nAnne-lise Emig [ [github](https://github.com/annelise08) | [linkedin](https://www.linkedin.com/in/anne-lise-emig/) ]\n\nGiovana De La Cruz [ [github](https://github.com/giovanacdlc) | [linkedin](https://www.linkedin.com/in/giovanadelacruz/) ]\n\nKasey Wolff [ [github](https://github.com/kaseywolff) | [linkedin](https://www.linkedin.com/in/kaseywolff/) ]\n\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n\n\n\n\n\n\u003c!-- BADGES/ SHIELDS and URLs --\u003e\n\n[contributors]: https://img.shields.io/github/contributors/open-source-labs/Recoilize.svg?style=for-the-badge\n[contributors-url]: https://github.com/open-source-labs/Recoilize/graphs/contributors\n[npm-v]: https://img.shields.io/npm/v/recoilize?style=for-the-badge\n[npm-url]: https://www.npmjs.com/package/recoilize\n[chrome-v]: https://img.shields.io/chrome-web-store/v/jhfmmdhbinleghabnblahfjfalfgidik?style=for-the-badge\n[chrome-url]: https://chrome.google.com/webstore/detail/recoilize/jhfmmdhbinleghabnblahfjfalfgidik\n[license]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\n[license-url]: https://github.com/oslabs-beta/Recoilize/blob/staging/LICENSE\n[PRs]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge\n\n\n\n[CSS3]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white\n[CSS3-url]: https://www.w3schools.com/css/\n[D3.js]: https://img.shields.io/badge/d3.js-F9A03C?style=for-the-badge\u0026logo=d3.js\u0026logoColor=white\n[d3-url]: https://d3js.org/\n[Git]: https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge\u0026logo=git\u0026logoColor=white\n[Git-url]: https://git-scm.com/\n[HTML5]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white\n[HTML5-url]: https://www.w3schools.com/html/\n[JavaScript]: https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E\n[JavaScript-url]: https://www.javascript.com/\n[Jest]: https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge\u0026logo=jest\u0026logoColor=white\n[Jest-url]: https://jestjs.io/\n[Node.js]: https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\u0026logo=node.js\u0026logoColor=white\n[Node-url]: https://nodejs.org/en/\n[React.js]: https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\n[React-url]: https://reactjs.org/\n[Redux]: https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white\n[Redux-url]: https://redux.js.org/\n[RTK]: https://img.shields.io/badge/RTK-563D7C?style=for-the-badge\u0026logo=redux\u0026logoColor=white\n[RTK-url]: https://redux-toolkit.js.org/\n[Testing-Library]:https://img.shields.io/badge/testing%20library-E33332?style=for-the-badge\u0026logo=testing-library\u0026logoColor=white\n[Testing-Library-url]: https://testing-library.com/ \n[TS.js]: https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\n[TS-url]: https://www.typescriptlang.org/","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-source-labs%2Frecoilize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-source-labs%2Frecoilize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-source-labs%2Frecoilize/lists"}