Interactive Playground
Experience React Dev Debugger in action! Try the examples below and watch state changes tracked in real-time.
Interactive Demo
Try the examples below and watch state changes tracked in real-time
Counter State
Object State
Array State (Todos)
useReducer (Shopping Cart)
Async State
Boolean States
Nested Object State
Form State
useTrackedContext (Context API)
useWhyDidYouUpdate (Re-render Analysis)
Change counter or user fields above to see what caused re-renders
useRenderTracking (Performance)
This component has rendered 0 times
Tracks component lifecycle and performance metrics
useComponentId (Component Identity)
Each component instance gets a unique identifier
Useful for tracking component instances in the dependency graph
Deep Diff (State Comparison)
Shows what changed between state updates:
Time Travel (State History)
View state timeline on the right →
In production, you can jump to any previous state snapshot
🐛 State Timeline
No state changes yet
Interact with the examples above to see state updates here
How It Works
The playground demonstrates the core features of React Dev Debugger:
- State Tracking - Every state change is captured with before/after values
- Timeline View - See chronological history of all updates
- Real-time Updates - Changes appear instantly in the debugger panel
- Multiple State Types - Track primitives, objects, and arrays
Try These Scenarios
Simple Counter
Click increment/decrement to see how primitive state changes are tracked.
Object State
Type in the name field to see how nested object properties are tracked.
Array Operations
Add and remove todos to see how array mutations are captured.
Next Steps
Ready to use this in your own app?