🔍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

npm i -D visualize-react-component

Usage

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

npm run virot ./src/main.tsx

I'm waiting for your feedback.