Atomictool.dev
View Demo

Atomic is an open source chrome developer tool debugger for applications built with Jotai state management library. Atomic developer tool provides real-time snapshots of a Jotai application's atomic state and component structure allowing developers to easily debug and build an application that is more performant.

Key features of Atomic devtool include:

• Time travel between snapshots within devtool
• Display state changes between snapshots
• Display component tree structure
• Dynamically rendering a component graph visualization with state changes
• Atom network data visualization for both atom dependents and atom read dependencies

1. Install Atomic Chrome extension.

   Add Atomic devtool chrome extension to your chrome browser. Click here to add.

2. Install Atomic 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 Jotai root after Provider.

   import AtomicDebugger from 'atomic-devtools';
   import { Provider } from "jotai";
   
   function App() {
   return (
   <Provider>
       <AtomicDebugger>
           Application Components
       </AtomicDebugger>
   </Provider>)
   }
   
   ReactDOM.render(<App/>,
   document.getElementById("root")
   );

5. Utilize useAtomicDevtool hook instead of useAtom hook to read an atom's value and provide a label within the functional component.

   function useAtomicDevtool(atom, name: string)

   useAtomicDevtool is an Atomic hook that manages Atomic devtool integration for a particular atom. The hook accepts two invocation parameters, atom and name. atom is the atom that will be attached to the devtools instance. name is a parameter that labels the atom for the devtools instance.

   Example

   import { useAtomicDevtool } from 'atomic-devtools'
   
   // Declare useAtomicDevtool hook inside functional component.
   const [value, updateValue] = useAtomicDevtool(anAtom, name)
   

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.

• Time Travel

  The ability to jump between state changes within the devtool. The snapshot list provides the state throughout the Jotai-built application runtime and each time state changes, a new snapshot is added. By pressing the jump button next to each snapshot, you are able to visualize state for a specific snapshot.

• State Change Display

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

• Component Graph Visualization

  Atomic provides a data visualization of an applications component tree. Have the ability to see a hierarchical view of all the React components in an application. The component graph also provides information on which components are subscribed to a particular atom as well as provides real-time data on an atom's value, dependents, and read dependencies for a specific snapshot.

• Atom Network Visualization of Dependents and Read Dependencies

  Visualize a specfic atom's dependents (displays all atoms affected by the parent atom) and read dependencies (displays all atoms that affect the parent atom) relationships.

• Component Tree

  Displays a Jotai-built application component tree structure with subscribed atom(s) for a given snapshot.

• Logan Thies - @Github - @Linkedin
• Giovanni Lituma - @Github - @Linkedin
• Stanley Huang - @Github - @Linkedin
• Chandni Patel - @Github - @Linkedin )

• This project is licensed under the MIT License.