{"id":13479138,"url":"https://github.com/jotaijs/jotai-devtools","last_synced_at":"2025-04-05T00:10:20.020Z","repository":{"id":65578743,"uuid":"585777580","full_name":"jotaijs/jotai-devtools","owner":"jotaijs","description":"A powerful toolkit to enhance your development experience with Jotai","archived":false,"fork":false,"pushed_at":"2024-04-24T22:13:25.000Z","size":1977,"stargazers_count":107,"open_issues_count":6,"forks_count":24,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-05-01T23:15:48.513Z","etag":null,"topics":["debugger","jotai","jotai-devtools","react"],"latest_commit_sha":null,"homepage":"https://jotai.org/docs/tools/devtools","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/jotaijs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"publiccode":null,"codemeta":null}},"created_at":"2023-01-06T03:32:06.000Z","updated_at":"2024-05-18T00:33:52.297Z","dependencies_parsed_at":"2024-01-13T07:03:57.498Z","dependency_job_id":"71ff6d44-ca2e-41ba-abe9-58fedf094c3d","html_url":"https://github.com/jotaijs/jotai-devtools","commit_stats":{"total_commits":85,"total_committers":5,"mean_commits":17.0,"dds":0.09411764705882353,"last_synced_commit":"2fca2e86ac32b196853d3fed8e2e9007bc5050fe"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jotaijs%2Fjotai-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jotaijs%2Fjotai-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jotaijs%2Fjotai-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jotaijs%2Fjotai-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jotaijs","download_url":"https://codeload.github.com/jotaijs/jotai-devtools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266565,"owners_count":20910836,"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":["debugger","jotai","jotai-devtools","react"],"created_at":"2024-07-31T16:02:10.247Z","updated_at":"2025-04-05T00:10:20.005Z","avatar_url":"https://github.com/jotaijs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Jotai DevTools\n\n[![Build Status](https://img.shields.io/github/actions/workflow/status/jotaijs/jotai-devtools/ci.yml?style=flat\u0026colorA=000000\u0026colorB=259e02)](https://github.com/jotaijs/jotai-devtools/actions/workflows/ci.yml)\n[![Version](https://img.shields.io/npm/v/jotai-devtools?style=flat\u0026colorA=000000\u0026colorB=259e02)](https://www.npmjs.com/package/jotai-devtools)\n[![Version](https://img.shields.io/npm/dw/jotai-devtools?style=flat\u0026colorA=000000\u0026colorB=259e02)](https://www.npmjs.com/package/jotai-devtools)\n\n## 🚀 Features\n\n- Debug 🐞 atom values with ease\n- ⏳ Time-travel through your atoms and find bugs faster than before\n- Out-of-the-box 🔌 support for async/suspendible atoms\n- Built-in Dark mode 🌗\n- ✅ Supports custom `store`\n- ✅ Works with provider-less mode\n- ✅ Works with Next.js\n- ✅ Supports custom `nonce` for CSP\n- ✅ Hides private atoms with ability to configure\n- ✅ Tree-shakable and built for non-production environments\n- ✅ Parses all the JavaScript values with JSON Tree view\n- ✅ Diff checking with additions and deletion highlights\n\n## 📺 Preview\n\n\u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/jotai-devtools\"\u003e\n      \u003cimg alt=\"Jotai DevTools Screenshot\" src=\"./docs/internal/demo-screenshot.png\" width=\"750\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## ☝️ Prerequisites\n\n- Jotai version `\u003e=2.9.0`\n- React version `\u003e=17.0.0`\n\n## 📦 Setup\n\n_(See complete setup guide for UI-based devtools below)_\n\n```sh\n# yarn\nyarn add jotai-devtools\n\n# npm\nnpm install jotai-devtools --save\n```\n\n## ✨ UI DevTools\n\nEnhance your development experience with the UI based Jotai DevTool\n\n[![Demo](https://img.shields.io/badge/demo-%F0%9F%9A%80-green?style=flat\u0026colorA=000000\u0026colorB=259e02)](https://codesandbox.io/s/jotai-devtools-demo-k5p12d)\n\n### Babel plugin setup - (Optional but highly recommended)\n\nUse Jotai babel plugins for optimal debugging experience. Find the complete\nguide on [jotai.org](https://jotai.org/docs/tools/babel)\n\nEg.\n\n```ts\n{\n  \"plugins\": [\n    // Enables hot reload for atoms\n    \"jotai/babel/plugin-react-refresh\",\n    // Automatically adds debug labels to the atoms\n    \"jotai/babel/plugin-debug-label\"\n  ]\n}\n```\n\n### Next JS setup\n\n_You may skip this section if you're not using [Next.js](https://nextjs.org)._\n\nEnable `transpilePackages` for the UI CSS and components to be transpiled\ncorrectly.\n\n```ts\n// next.config.ts\n\nconst nextConfig = {\n  // Learn more here - https://nextjs.org/docs/advanced-features/compiler#module-transpilation\n  // Required for font css to be imported correctly 👇\n  transpilePackages: ['jotai-devtools'],\n};\n\nmodule.exports = nextConfig;\n```\n\n### Available props\n\n```ts\ntype DevToolsProps = {\n  // Defaults to false\n  isInitialOpen?: boolean;\n  // pass a custom store\n  store?: Store;\n  // Defaults to light\n  theme?: 'dark' | 'light';\n  // Defaults to 'bottom-left'\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n  // Custom nonce to allowlist jotai-devtools specific inline styles via CSP\n  nonce?: string;\n  // We recommend keeping these options static. i.e. set it only once. Avoid connecting it to re-renderable state\n  options?: {\n    // Private atoms are used internally in atoms like `atomWithStorage` or `atomWithLocation`, etc. to manage state.\n    // Defaults to `false`\n    shouldShowPrivateAtoms?: boolean;\n    // Expands the JSON tree view on initial render on Atom Viewer tab, Timeline tab, etc.\n    // Defaults to `false`\n    shouldExpandJsonTreeViewInitially?: boolean;\n    // The interval (in milliseconds) between each step of the time travel playback.\n    // Defaults to `750ms`\n    timeTravelPlaybackInterval?: number;\n    // The maximum number of snapshots to keep in the history.\n    // The higher the number the more memory it will consume.\n    // Defaults to `Infinity`. Recommended: `~30`\n    snapshotHistoryLimit?: number;\n  };\n};\n```\n\n### Provider-less\n\n```tsx\nimport { DevTools } from 'jotai-devtools';\n// Note that this may get included in your production builds. Please import it conditionally if you want to avoid that\nimport 'jotai-devtools/styles.css';\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cDevTools /\u003e\n      {/* your app */}\n    \u003c/\u003e\n  );\n};\n```\n\n### With Provider\n\n```tsx\nimport { createStore } from 'jotai';\nimport { DevTools } from 'jotai-devtools';\n// Note that this may get included in your production builds. Please import it conditionally if you want to avoid that\nimport 'jotai-devtools/styles.css';\n\nconst customStore = createStore();\n\nconst App = () =\u003e {\n  return (\n    \u003cProvider store={customStore}\u003e\n      \u003cDevTools store={customStore} /\u003e\n      {/* your app */}\n    \u003c/Provider\u003e\n  );\n};\n```\n\n## Hooks\n\nDetailed documentation is available on\n[https://jotai.org/docs/api/devtools](https://jotai.org/docs/api/devtools)\n\n```tsx\nimport {\n  useAtomsSnapshot,\n  useGotoAtomsSnapshot,\n  useAtomsDebugValue,\n  // Redux devtool hooks\n  useAtomDevtools,\n  useAtomsDevtools,\n} from 'jotai-devtools';\n```\n\n## Migration guides\n\n### Migrate ƒrom @emotion/react to native CSS\n\nWith the latest release, Jotai DevTools no longer depends on `@emotion/react`\nand is replaced it with native CSS.\n\n1. Remove `@emotion/react` from your dependencies\n\n   ```sh\n   # yarn\n   yarn remove @emotion/react\n\n   # npm\n   npm uninstall @emotion/react\n   ```\n\n2. Replace `@emotion/react` with `jotai-devtools/styles.css` in your code\n\nNote that this css file may get included in your production builds please import\nit conditionally if you want to avoid that.\n\n```diff\nimport { DevTools } from 'jotai-devtools';\n+ import 'jotai-devtools/styles.css';\n```\n\n### Migrate Jotai to V2\n\nFind the official migration guide on\n[jotai.org](https://jotai.org/docs/guides/migrating-to-v2-api)\n\n### Migrate `jotai/react/devtools` to `jotai-devtools`\n\n1. Install this package\n\n   ```sh\n   # npm\n   npm install jotai-devtools --save\n\n   # yarn\n   yarn add jotai-devtools\n   ```\n\n2. Update imports from `jotai/react/devtools` to `jotai-devtools`\n   ```diff\n   import {\n    useAtomsSnapshot,\n    useGotoAtomsSnapshot,\n    useAtomsDebugValue,\n    // Redux devtool integration hooks\n    useAtomDevtools,\n    useAtomsDevtools,\n   - } from 'jotai/react/devtools';\n   + } from 'jotai-devtools';\n   ```\n\n### Inspirations\n\n[Redux DevTools](https://github.com/reduxjs/redux-devtools)\n[React Query DevTools](https://tanstack.com/query/v4/docs/react/devtools)\n\n### Other announcements\n\n✨ [First announcement](https://twitter.com/dai_shi/status/1611717249471246338)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjotaijs%2Fjotai-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjotaijs%2Fjotai-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjotaijs%2Fjotai-devtools/lists"}