🔍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.

    25

    This website collects cookies to deliver better user experience

    🔍Visualize React components to browser for smoother discussions😊