Skip to main content
Module

x/valtio/docs/utils/devtools.mdx

πŸ’Š Valtio makes proxy-state simple for React and Vanilla
Go to Latest
File
---title: 'devtools'section: 'Utils'description: 'Use the Redux DevTools extension with Valtio'---
# devtools
#### Dev tools
You can use [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension) for plain objects and arrays.
```jsximport { devtools } from 'valtio/utils'
const state = proxy({ count: 0, text: 'hello' })const unsub = devtools(state, 'state name')```
<details> <summary>Manipulating state with Redux DevTools</summary>The screenshot below shows how to use Redux DevTools to manipulate state. First select the object from the instances drop down. Then type in a JSON object to dispatch. Then click "Dispatch". Notice how it changes the state.
<img width="564" alt="image" src="https://user-images.githubusercontent.com/6372489/141134955-26e9ffce-1e2a-4c8c-a9b3-d9da739610fe.png"/></details>#### Use it with vanilla JS
````jsx
Valtio is not tied to React, you can use it in vanillaJS.
```jsximport { proxy, subscribe, snapshot } from 'valtio/vanilla'
const state = proxy({ count: 0, text: 'hello' })
subscribe(state, () => { console.log('state is mutated') const obj = snapshot(state) // A snapshot is an immutable object})````