Visualize your React component hierarchy as an interactive graph directly within Visual Studio Code.
Compurrnents-Viewer helps you understand the structure and relationships within your Typescript projects by generating a clear, interactive diagram of your components.
Features
Interactive Component Graph: Explore your component structure with pan and zoom capabilities.
TypeScript Support: Analyzes .ts and .tsx files to build the component graph.
Alias Import Resolution: Supports path aliases defined in tsconfig.json for accurate dependency mapping.
Note: Aliases defined directly in Vite or Webpack configurations are not currently supported.
VS Code Integration: Runs entirely within VS Code, requiring no external API access or setup.
Usage
Open a Typescript file in your project.
Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
Run the command: Compurrnents-Viewer: Show Graph.
A new panel will open displaying the interactive component graph.
Contributing
Contributions are welcome! If you encounter bugs or have feature suggestions, please open an issue on the Bug tracker.
