Co-Authored by: Lumeng Li, Jason Huang, Caleb Belkin, Kris Fragata
Look! Up in the sky! It’s a bird! It’s a plane! It’s SVISUALIZE!
A developer in trouble
You’ve just been tasked to iterate on a large-scale application that uses the JavaScript framework Svelte. It promotes a component-based architecture, allowing developers to build modular and reusable UI components for a cleaner and more organized codebase. This modularity also poses a challenge: how do you effectively keep track of all of the components you create? What if you are brought onto a project devoid of logical component organization? What a disaster!
As you sit at your desk and open the project for the first time, you’re confronted with a daunting sight: a sprawling codebase with over 20 components, each seemingly interconnected with one another. You start to click through each component in confusion and a sense of dread sets in.
Not to worry! Svisualize to the Rescue!
Svisualize is a Visual Studio Code extension that gives developers the power to visualize their Svelte components as they code their project. It features dynamic rendering of a D3 tree representing the project’s component structure within VS Code webview.
Additionally, developers can:
▸ Easily locate components by clicking respective nodes and instantly traverse to their desired file
▸ Monitor multi-level prop elements by hovering over each node
▸ Switch root node to visualize smaller sections of a project’s component structure
▸ Effortlessly integrate additional components into the tree by clicking the update button to ensure seamless re-rendering of your changes
“What if I already built my application, can I still use Svisualize?”
Of course! Svisualize can help debug applications by identifying errors in parent-child relationships or improper passing of props between components. The extension offers live updates to help developers stay current with any changes made to their codebase.
What’s next?
Our team is committed to continuously refine the look and functionality of Svisualize. Some updates planned for version 2.0 include:
▸ Support for multi-page SvelteKit applications
▸ Additional node functionality to (1) generate new child component files from each node with boilerplate import statement based on the parent node and (2) delete selected node and file directly from webview
▸ Create a light mode on toggle
▸ Further modularize parsing function
▸ Addition of a status bar button to toggle extension activation and deactivation
Try it out!
Download Svisualize and follow our README to begin visualizing your next Svelte application!
Visit our site for more information!
Meet the Svisualize team:
Jason Huang: LinkedIn | GitHub