Valtio DevTools

Real-time state inspector for Valtio.

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!