1. Once installed, you may need to reload your VS Code, but next open up the command pallette by pressing “cmd + shift + p” on MacOS or “ctrl + shift + p” and click the command “Show VisiVue Panel”.

  1. Once you click the command in the command pallette, it will open up VisiVue! All you have to do is import the Vue file you want to visualize and you are set!

Open Source

How to Contribute


How to Run in Development Mode


  1. Vue Flow
  2. VS Code Extension API
  3. Webview API
  4. Developer’s Guide to Building VSCode Webview Panel with React and Messages by Michael Mike Benliyan
  5. TypeScript
  6. Known Bugs

  7. If you select a file and a tree is rendered: subsequently selecting another file should clear the current tree and render a new tree for that new file. However, what happens is that the newly rendered tree will not have nodes, but will still persist the edges. What we suspect is happening is that Vue Flow’s internal processing of our data is causing this issue. We are currently working on a fix.
  8. Change Log

    Tech Stack

    TypeScript JavaScript Vue.js Webpack Visual Studio Code VueFlow Vite NodeJS

    VisiVue Contributors

    Accelerated by OS Labs and inspired by ReacTree

    Name GitHub LinkedIn
    Abe Henderson GitHub LinkedIn
    Christopher Park GitHub LinkedIn
    Kasey Nguyen GitHub LinkedIn
    Ulf Wong GitHub LinkedIn
    Yosuke Tomita GitHub LinkedIn

    GitHub

    View Github