Library to connect your Jotai application to Atomic Devtools Extension

devtool, jotai, extension, atomic, state management
npm install atomic-devtools@1.1.58


atomic banner

Developer tool for Jotai applications

gitHub license npm version contributions welcome


Atomic is an open source Google Chrome developer tool designed for applications built using Jotai as a state management library. Atomic developer tool provides real-time snapshots of a Jotai application's atomic state and component structure allowing developers to visually inspect their application state and to readily determine development solutions.

Key features of Atomic devtool include:

  • Display state changes between snapshots
  • Display component tree structure
  • Dynamically rendering graphic component visualization with state changes
  • Atom network data visualization for both atom dependents and atom read dependencies

Getting Started

  1. Install Atomic Chrome extension.

    Add Atomic Chrome extension to your chrome browser.

  2. Install atomic-devtools Module.

    npm install atomic-devtools
  3. Import useAtomicDevtool & AtomicDebugger from the Atomic module.

    import { useAtomicDevtool, AtomicDebugger } from 'atomic-devtools';
  4. Integrate AtomicDebugger as a React component within the application wrapping all application components intended to debug.

    • AtomicDebugger currently extracts Jotai State from it's Provider Component. Implementation is required

    • Placement of AtomicDebugger component relative to App component or Provider component is not important, so long as all stateful components are children of AtomicDebugger

    • ReactDOM.Render( ) Must receive a document **'root'** element from the application as it's argument.

    • Currently, only intended to be used with a single Provider component.

    import AtomicDebugger from 'atomic-devtools';
    import { Provider } from 'jotai';
    function App() {
      return (
                 {Application Components}
    ReactDOM.render(<App />, document.getElementById('root'));
  5. While developing your application, utilize useAtomicDevtool hook in place of Jotai's useAtom hook to send atom's config to Atomic Devtools.

    function useAtomicDevtool(atom: anyAtom, name: string);

    useAtomicDevtool is an Atomic hook that manages Atomic devtool integration for a particular atom. The hook accepts two arguments, atom and name. atom is the atom that will be connected to the devtools instance. name is a string label for identifying the atom for the devtools instance.


    import { useAtomicDevtool } from 'atomic-devtools';
    const anAtom = atom('example')
    function SomeComponent() {
         const [value, updateValue] = useAtomicDevtool(anAtom, 'anAtomName');
  6. Open your application on the Chrome Browser and start debugging with Atomic devtool!

    Important- Only supported with React applications using Jotai as state management.

    Important- Only intended for development (NODE_ENV === 'development').


  • State Change Display

    Easily compare atom state changes between snapshots in real-time.

    stateDiff GIF
  • Component Graph Visualization

    Atomic provides a data visualization of an applications React component tree. Have the ability to see a hierarchical view of all the React components in an application. The component graph provides the locations of each useAtom invocation per components, as well provides real-time data on an atom's value, dependents, and read dependencies for a specific snapshot.

    componentGraph GIF
  • Atom Network Visualization of Dependents and Read Dependencies

    Visualize an atom's dependents (displays all atoms affected by an atom) and read dependencies (displays all atoms that affect the inspected atom).

    atomNetwork GIF
  • Component Tree

    Displays the applications React component structure with subscribed atom(s) for a given snapshot.

    componentTree GIF


  • Time Travel

    Currently, the ability to jump between state changes within the devtool is feasible. The snapshot list provides the state throughout the Jotai-built application runtime and each time state changes, a new snapshot is added. We intend to develop functionality that will, pressing the jump button next to each snapshot, revert application state to the desired historical snapshot.


  • Interested in contributing? Atomic is an open-source project and welcomes contributions. Please fork this repo, create a feature branch, and submit a pull request.

Core Team


  • This project is licensed under the MIT License.

Atomic was developed under tech accelerator OSLabs.