Svisualize

• Purpose: Svisualize is a VS Code extension designed to visualize Svelte components, helping developers understand the structure of their application as they code. It provides a real-time component tree representation for Svelte projects.

• Key Features:

  • Visualizes Svelte components as nodes in a tree structure.
  • Displays parent-child hierarchy from any root file.
  • Shows props within each component on hover.
  • Allows opening files by clicking on nodes.
  • Updates the tree dynamically when the codebase changes.

• Target Audience: Developers working with Svelte (specifically SvelteKit single-page applications) who need a visualization tool to track component relationships and props.

• Current Limitations: Only supports single-page SvelteKit applications (multi-page support is planned in the roadmap).

• Future Plans:

  • Multi-page SvelteKit support.
  • Enhanced UX/UI (e.g., node color customization, light mode).
  • Additional features like file deletion and child file creation from nodes.
  • More testing and status bar toggle for activation.

• Learn More: Visit Svisualize.dev for details.

• Open Source: Contributions are welcome—fork the project and submit pull requests.