Svisualize is a Svelte component visualizer for developers to see the shape of their application as they code.
Find out more at Svisualize!
Table of Contents
Overview
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,
** 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!
Meet Our Team