Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oslabs-beta/svisualize

Visualize your svelte components as you code using D3
https://github.com/oslabs-beta/svisualize

component-architecture d3 svelte tree-structure typescript vscode-extension

Last synced: 2 months ago
JSON representation

Visualize your svelte components as you code using D3

Host: GitHub
URL: https://github.com/oslabs-beta/svisualize
Owner: oslabs-beta
License: mit
Created: 2024-02-02T16:22:51.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-04-27T16:35:47.000Z (8 months ago)
Last Synced: 2024-10-05T18:04:32.686Z (3 months ago)
Topics: component-architecture, d3, svelte, tree-structure, typescript, vscode-extension
Language: TypeScript
Homepage: https://svisualize.dev
Size: 37.8 MB
Stars: 77
Watchers: 3
Forks: 1
Open Issues: 3
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        


   





Svisualize is a Svelte component visualizer for developers to see the shape of their application as they code. 
Find out more at Svisualize!








[![Svelte](https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00)](https://svelte.dev/)

[![JavaScript](https://img.shields.io/badge/javascript-yellow?style=for-the-badge&logo=javascript&logoColor=white)](https://www.javascript.com/)

[![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

[![D3.js](https://img.shields.io/badge/d3%20js-F9A03C?style=for-the-badge&logo=d3.js&logoColor=white)](https://d3js.org/)

[![Node](https://img.shields.io/badge/-node-339933?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/en)


![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

[![Webpack](https://img.shields.io/badge/Webpack-grey?style=for-the-badge&logo=webpack&logoColor=7DF9FF)](https://jestjs.io/)

[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-grey?style=for-the-badge&logo=tailwind-css&logoColor=38B2AC)](https://tailwindcss.com/)

[![Mocha](https://img.shields.io/badge/Mocha-grey?style=for-the-badge&logo=mocha&logoColor=8D6748)](https://mochajs.org/)



## Table of Contents

- 🖥️ [Overview](#overview)

- ⚙️ [Installation](#installation)

- 🛠 [Getting Started](#getting-started)

- 🗺️ [Roadmap](#roadmap)

- 🔗 [Contributions](#contributions)

- 👩🏻‍💻 [Meet Our Team](#meet-our-team)

## Overview

![demo](media/demo.GIF)

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. 

1. 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).

2. Search for 'svisualize' and click the "install" button.



  



3. 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.

1. Fork the Project

2. Create your Feature Branch (`git checkout -b newFeature`)

3. Commit your Changes (`git commit -m 'added a newFeature'`)

4. Push to the Branch (`git push origin newFeature`)

5. Open a Pull Request

Don't forget to give the project a star! Thank you for your support!

## Meet Our Team

  

    

      

      


      _{Lumeng Li}

      


      Linkedin |

      GitHub

    

     

      

      


      _{Jason Huang}

      


      Linkedin |

      GitHub

     

      

      


      _{Kris Fragata}

      


      Linkedin |

      GitHub

     

      

      


      _{Caleb Belkin}

      


      Linkedin |

      GitHub