How Jotai is structuredAn interactive map of the Jotai codebase. The atomic state library for React, the whole repo in 227 files with its examples and website. src/vanilla.ts is the core: a change to it can reach 27 files.

Files visualized: 227

Languages: TypeScript, JavaScript

Topics: state management, react

Source repository: https://github.com/pmndrs/jotai

Structure227 files and 208 connections between their symbols.Most depended on

src/vanilla.ts, imported by 22 files

tests/test-utils.ts, imported by 19 files

website/src/atoms/index.js, imported by 12 files

src/vanilla/atom.ts, imported by 11 files

src/vanilla/store.ts, imported by 9 files

Files

src/vanilla.ts: no top-level classes or functions; imports src/vanilla/atom.ts, src/vanilla/store.ts, src/vanilla/typeUtils.ts

tests/test-utils.ts: 2 functions

website/src/atoms/index.js: no top-level classes or functions

src/vanilla/atom.ts: 3 functions; imports src/vanilla/store.ts

src/vanilla/store.ts: 3 functions; imports src/vanilla/internals.ts

website/src/components/button.js: 1 function; imports website/src/components/icon.js

src/react.ts: no top-level classes or functions; imports src/react/Provider.ts, src/react/useAtom.ts, src/react/useAtomValue.ts, src/react/useAtomValueRaw.ts, src/react/useAtomValueRawSync.ts, src/react/useSetAtom.ts

website/src/components/code.js: 1 function

website/src/components/icon.js: 1 function

src/react/Provider.ts: 2 functions; imports src/vanilla.ts

src/vanilla/utils/constants.ts: no top-level classes or functions

src/react/continuablePromise.ts: 2 functions; imports src/vanilla/internals.ts

website/src/components/inline-code.js: 1 function

website/src/components/jotai.js: 2 functions; imports website/src/components/logo.js

src/react/useAtomValue.ts: 2 functions; imports src/react/continuablePromise.ts, src/react/useAtomValueRaw.ts, src/vanilla.ts

src/react/useAtomValueRaw.ts: 2 functions; imports src/react/Provider.ts, src/react/continuablePromise.ts, src/vanilla.ts

src/react/useSetAtom.ts: 1 function; imports src/react/Provider.ts, src/vanilla.ts

src/vanilla/internals.ts: 34 functions; imports src/vanilla/atom.ts, src/vanilla/typeUtils.ts

src/vanilla/typeUtils.ts: no top-level classes or functions; imports src/vanilla/atom.ts

src/vanilla/utils.ts: no top-level classes or functions; imports src/vanilla/utils/atomWithDefault.ts, src/vanilla/utils/atomWithLazy.ts, src/vanilla/utils/atomWithObservable.ts, src/vanilla/utils/atomWithReducer.ts, src/vanilla/utils/atomWithRefresh.ts, src/vanilla/utils/atomWithReset.ts, src/vanilla/utils/atomWithStorage.ts, src/vanilla/utils/constants.ts and 4 more

src/vanilla/utils/atomWithStorage.ts: 4 functions; imports src/vanilla.ts, src/vanilla/utils/constants.ts

src/vanilla/utils/selectAtom.ts: 3 functions; imports src/vanilla.ts

website/gatsby-shared.js: 2 functions; imports website/src/atoms/index.js, website/src/components/code-sandbox.js, website/src/components/code.js, website/src/components/inline-code.js, website/src/components/layout.js, website/src/components/mdx.js, website/src/components/stackblitz.js, website/src/components/toc.js

website/src/components/client-only.js: 1 function

website/src/components/credits.js: 1 function; imports website/src/components/button.js

website/src/components/external-link.js: 1 function

website/src/components/meta.js: 1 function

website/src/components/modal.js: 1 function

website/src/components/search-button.js: 1 function; imports website/src/atoms/index.js, website/src/components/button.js

examples/hacker_news/src/App.tsx: 4 functions

examples/hacker_news/src/index.tsx: no top-level classes or functions; imports examples/hacker_news/src/App.tsx, examples/hacker_news/src/styles.css

examples/hacker_news/src/styles.css: no top-level classes or functions

examples/hello/src/App.tsx: 3 functions

examples/hello/src/prism.css: no top-level classes or functions

examples/hello/src/style.css: no top-level classes or functions

examples/mega-form/src/App.tsx: 4 functions; imports examples/mega-form/src/initialValue.ts, examples/mega-form/src/useAtomSlice.ts

examples/mega-form/src/initialValue.ts: no top-level classes or functions

examples/mega-form/src/style.css: no top-level classes or functions

examples/mega-form/src/useAtomSlice.ts: 1 function

examples/starter/src/index.css: no top-level classes or functions

187 further files are in the graph but not listed here.NeedyNodes is a free, browser-based tool that turns a codebase into an interactive dependency map: folders become regions, files are laid out in the direction their imports run, and circular dependencies or dead exports are flagged automatically. Point at a file to see what it uses and what uses it, or double click it to see every file a change to it can reach. It parses JavaScript, TypeScript, Python, Go, Rust, Vue and Svelte, up to 1000 files per map. Nothing is uploaded: parsing runs entirely in the browser.Browse all visualized codebases · Visualize your own codebase