🔍Visualize React components to browser for smoother discussions😊

Introduce

It is very difficult to grasp the whole picture of a component just by looking at the code such as vscode. We often use tools such as Figma to create diagrams and sequences, but this is a very costly process. In order to solve this problem, we have created and released a library to visualize react components as diagrams in a browser. It is still a work in progress, so many considerations may be missing.

Point

Using the popular library, @typescript-eslint/typescript-estree AST to do the analysis.

By using VSCode's schema in the Browser, you can quickly check the implementation of components you are interested in.

If you are using vite without setting it in the config file, you can resolve the alias from vite.config.ts.

It uses prismjs, which allows for code reading that is more like an IDE.

Demo

Install

Usage

By specifying the React root file and the component files, it will parse them and output the stats.html file.

I'm waiting for your feedback.