I just released the first version of viewmodel-react-explorer, a debugging tool for the ViewModel library. It displays the hierarchy of components with their state and computed values. It’s all reactive so you can change the state of any component from the Explorer panel.

Here’s an example of changing the state of a component:

The Person component has a function that returns firstName + lastName, you can evaluate that value on the fly:

You can even change the state when a property contains an object:

It even tells you when one of your components is failing a validation:

A few pending things are:

Ability to save and restore the state of a component or the entire app.

Record and replay user sessions.

Time travel debugging.

To install run npm i --save viewmodel-react-explorer and add the ViewModelExplorer component anywhere in your app (usually in the root component). You should use a condition to prevent loading it in production:

Check out the documentation for more information.