Valtio DevTools

About

Valtio DevTools is a high-fidelity, real-time state inspector for React and Vanilla JS applications using the Valtio state management library.

Designed specifically for complex, deeply-nested state trees, this extension bridges the gap between your app and Chrome's Developer Tools to provide a seamless debugging experience.

🔥 KEY FEATURES
• Real-Time Tree View: Inspect your Valtio proxies as they mutate in real-time with a beautifully formatted, color-coded JSON tree.
• Time Travel (RESTORE): Browse your mutation history and click on any historical state snapshot to instantly teleport your app's live state back in time.
• Smart Action Tracking: Automatically detects and badges functions/actions within your state, separating data from logic.
• Derived State Detection: Automatically recognizes derive-valtio read-only stores and safely disables time-travel to prevent errors.
• High-Fidelity UI: Built with a dark-mode JetBrains Mono aesthetic, pulsing connection indicators, and intuitive controls.

🛠️ HOW TO USE

Install this Chrome Extension.

Install the companion bridge library in your project:

npm install -D valtio-inspector

Open Chrome DevTools (F12) and navigate to the 'Valtio DevTools' tab!