How about making the viz a drop-in visualizer to any application?

[coodoo]

I just did a quick POC to make xstate-viz a drop-in visualizer in a react app so that it could be toggled on and off as needed, see it in action here

Sample code below, basically the viz component lives with-in the real project and will be updated whenever the machine content was changed.

As a side note, it would be great to toggle show/hide of the sidebar by an argument.

import { StateChart } from '@statecharts/xstate-viz'

const App = () => {
  const [state, send] = useMachine(MainMachine)
  const [debug, setDebug] = useState(false)
  const viz = debug ? <StateChart machine={MainMachine} /> : null

  return (
    <div>
      my app

      <button
        style={{float:'right'}}
        onClick={() => setDebug(!debug)}>
        viz
      </button>

      {viz}
    </div>
  )
}

[carloslfu]

I was thinking about a less intrusive option. The option is using a hook that collects metadata in development mode of all statecharts in your app and automatically shows a debugger window (with a button or with a keyboard shortcut). It'll allow you to navigate over all your statecharts and if possible change the state. All this would be done with a global config. Maybe implementing it as an experimental file on the use-machine package.

import { useMachine, configViz } from 'use-machine/experimental'

configViz({ withButton: true }) // one global call that enable the viz

const App = () => {
  const [current, send] = useMachine(MainMachine)

  return (
    <div>
       {JSON.stringify(current.value)}
    </div>
  )
}

What do you think?

[coodoo]

Sounds good to me! 👍👍

[farskid]

I recently got the visualizer working locally on my React + TS codebase by a similar approach. Following a discussion with @davidkpiano, I'm working on a small CLI to be able to open visualizer for any machine the same way tools like webpack-bundle-analyzer work. Therefore, anyone would be able to visualize all the machines in their codebase using es modules and file path references.

{
  "visualize": "xstate-viz --file path_to_the_file_with_default_export_machine --open"
}

Will submit a WIP PR soon. Stay tuned!

[farskid]

Also if you're looking for a sneak peek into how it works for my project right now, here are two files from the project.

https://github.com/farskid/hslzone/blob/master/src/components/App/AppWithMachine.tsx
https://github.com/farskid/hslzone/blob/master/src/components/Viz.tsx

[carloslfu]

Great, @farskid!

[sesm]

I would much prefer a visualization tool that generates SVG from state machine objects. This way it would be framework-agnostic and potentially usable from command line.

[riddla]

@sesm, are you aware of https://github.com/lucmartens/xstate-plantuml?

[riddla]

@farskid, I am very interested in your work. As I'm working much in Vue codebases these day, there might also be a change to use the visualizer components via https://github.com/akxcv/vuera ...
Are you still on it?

[farskid]

@riddla Thanks for sharing plantuml project and the kind words :) we're working on the a vscode extension for the visualization. stay tuned.

[Indrajeetsing]

Also if you're looking for a sneak peek into how it works for my project right now, here are two files from the project.

https://github.com/farskid/hslzone/blob/master/src/components/App/AppWithMachine.tsx
https://github.com/farskid/hslzone/blob/master/src/components/Viz.tsx

Hello @farskid, I tried running your code and I'm getting following error.
Error: Can't resolve 'xstate/lib/graph' in 'node_modules@statecharts\xstate-viz\lib'

Do you know how can I fix it?

[0000marcell]

@Indrajeetsing it's a dependency error, you probably need to install the dependencies again

[teijo]

@Indrajeetsing Seems that the 0.3.0 release of this package is expecting to find that file, which does not exist anymore in the latest xstate package. The latest version of xstate conforms to ^4.6.4 of 0.3.0 version requirement (^ matches 4.12.0), but internally xstate have moved the graph file, possibly to @xstate/graph.

You'd need to lock your xstate dependency to "xstate": "4.6.4" in your app if you try to use the 0.3.0 version (latest at the moment of writing) of this package. It did not seem straightforward though, resulting into further type mismatches.

More feasibility talk in #67.

[piku0709]

Need assistance on how to visualize xsate chart of my state machine on my native react app, without any need to visit - https://xstate.js.org/viz/. Have gone through the comments in this discussion , but could not find anything exactly for my requirement

[serhiipalash]

@piku0709 it's possible to do on web with statechart-viz, but it will be static, without any live updates on state change, unless you pass a new state to visualiser every time it changes.

If you need it work in React Native, you have two options:

1. Create a fork and rewrite it with react-native-svg and fixes for styles and HTML entities
2. Create and deploy a web app with a single page receiving statechart in query params and displaying it. Use it in React Native within WebView

but I wouldn't do anything of it and tried to patch @xstate/inspect to make it opening iframe in WebView.

[piku0709]

@serhiipalash - Thank you for your suggestions
@xstate/inspect helps me to achieve my goal.
Also adding a video which helped me using @xstate/inspect in my react app - https://www.youtube.com/watch?v=ChCJ7rz-ICE

[serhiipalash]

@piku0709 great!