Large-scale Javascript projects can contain a multitude of components. Svelte, a newer Javascript framework, lacks a component visualization tool within Visual Studio Code. Svisualize is a VS Code extension that gives developers the ability to visualize their Svelte components as they create their project. With Svisualize you can:
Visualize each Svelte component as a node on the component tree
View parent-child hierarchy from ANY root file
View props present within each component by hovering it's component node
Open files on node click
Update the tree structure on change in codebase by clicking the update button
Installation
Svisualize extension can be installed through the VS Code Marketplace.
Start by clicking the Extensions icon in the Activity Bar on the side of VS Code or by using the View: Extensions command (Ctrl/Cmd+Shift+X).
Search for 'svisualize' and click the "install" button.
Upon completion, VS Code will have installed the extension and Svisualize is ready for use.
Getting Started
After Svisualize is installed in VS Code,
You will find a new tree icon added to the Activity Bar on the left-hand side. Click on it to launch the extension
Select a root file to render your first tree
** Svisualize currently only supports SINGLE PAGE SvelteKit applications **
Roadmap
Support for mutli-page SvelteKit applications
Add additional functionality within the visualizer
Delete files on node click
Create new child files from parent nodes
More UX/UI options within visualizer (e.g. changing color of nodes based on user preferences)
Create a light mode on toggle for webview
Addition of a status bar button to toggle extension activation and deactivation
Implement more testing
Contributions
Svisualize is an open source project and we welcome iterations and contributions. If you have a suggestion, please follow the steps below or open an issue to discuss your idea.
Fork the Project
Create your Feature Branch (git checkout -b newFeature)
Commit your Changes (git commit -m 'added a newFeature')
Push to the Branch (git push origin newFeature)
Open a Pull Request
Don't forget to give the project a star! Thank you for your support!
Large-scale Javascript projects can contain a multitude of components. Svelte, a newer Javascript framework, lacks a component visualization tool within Visual Studio Code. Svisualize is a VS Code extension that gives developers the ability to visualize their Svelte components as they create their project. With Svisualize you can:
