{"id":15848670,"url":"https://github.com/oslabs-beta/svisualize","last_synced_at":"2025-07-22T17:34:10.155Z","repository":{"id":221007659,"uuid":"751926798","full_name":"oslabs-beta/Svisualize","owner":"oslabs-beta","description":"Visualize your svelte components as you code using D3","archived":false,"fork":false,"pushed_at":"2024-04-27T16:35:47.000Z","size":39670,"stargazers_count":88,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-07T18:08:35.566Z","etag":null,"topics":["component-architecture","d3","svelte","tree-structure","typescript","vscode-extension"],"latest_commit_sha":null,"homepage":"https://svisualize.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"open-source-labs","custom":["https://donorbox.org/donations-to-oslabs-inc"]}},"created_at":"2024-02-02T16:22:51.000Z","updated_at":"2025-04-14T16:43:06.000Z","dependencies_parsed_at":"2024-02-05T17:51:14.550Z","dependency_job_id":"9de050ff-a87c-4883-96c3-7bf364b866b3","html_url":"https://github.com/oslabs-beta/Svisualize","commit_stats":{"total_commits":149,"total_committers":6,"mean_commits":"24.833333333333332","dds":0.5033557046979866,"last_synced_commit":"f60ba0bba8a252779b80e0b251a843759d70c8ff"},"previous_names":["oslabs-beta/svisualize"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oslabs-beta/Svisualize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FSvisualize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FSvisualize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FSvisualize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FSvisualize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/Svisualize/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FSvisualize/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266539634,"owners_count":23945054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-architecture","d3","svelte","tree-structure","typescript","vscode-extension"],"created_at":"2024-10-05T18:04:42.623Z","updated_at":"2025-07-22T17:34:10.129Z","avatar_url":"https://github.com/oslabs-beta.png","language":"TypeScript","funding_links":["https://github.com/sponsors/open-source-labs","https://donorbox.org/donations-to-oslabs-inc"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n   \u003cimg src=\"media/banner.png\" width=\"800\"/\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\nSvisualize is a Svelte component visualizer for developers to see the shape of their application as they code. \u003cbr/\u003eFind out more at \u003ca href=\"https://svisualize.dev\"\u003eSvisualize\u003c/a\u003e!\n\u003cbr/\u003e\n\u003c/p\u003e\n\n\u003cdiv align='center'\u003e\n\n[![Svelte](https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge\u0026logo=svelte\u0026logoColor=FF3E00)](https://svelte.dev/)\n[![JavaScript](https://img.shields.io/badge/javascript-yellow?style=for-the-badge\u0026logo=javascript\u0026logoColor=white)](https://www.javascript.com/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![D3.js](https://img.shields.io/badge/d3%20js-F9A03C?style=for-the-badge\u0026logo=d3.js\u0026logoColor=white)](https://d3js.org/)\n[![Node](https://img.shields.io/badge/-node-339933?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)](https://nodejs.org/en)\n\u003cbr/\u003e![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n[![Webpack](https://img.shields.io/badge/Webpack-grey?style=for-the-badge\u0026logo=webpack\u0026logoColor=7DF9FF)](https://jestjs.io/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-grey?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=38B2AC)](https://tailwindcss.com/)\n[![Mocha](https://img.shields.io/badge/Mocha-grey?style=for-the-badge\u0026logo=mocha\u0026logoColor=8D6748)](https://mochajs.org/)\n\n\u003c/div\u003e\n\n## Table of Contents\n\n- 🖥️ [Overview](#overview)\n- ⚙️ [Installation](#installation)\n- 🛠 [Getting Started](#getting-started)\n- 🗺️ [Roadmap](#roadmap)\n- 🔗 [Contributions](#contributions)\n- 👩🏻‍💻 [Meet Our Team](#meet-our-team)\n\n## Overview\n\n![demo](media/demo.GIF)\nLarge-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:\n\n- Visualize each Svelte component as a node on the component tree\n- View parent-child hierarchy from ANY root file\n- View props present within each component by hovering it's component node\n- Open files on node click\n- Update the tree structure on change in codebase by clicking the update button\n\n## Installation\n\nSvisualize extension can be installed through the VS Code Marketplace. \n1. 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).\n2. Search for 'svisualize' and click the \"install\" button.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"media/marketplace.jpg\" alt=\"marketplace\"\u003e\n\u003c/p\u003e\n\n3. Upon completion, VS Code will have installed the extension and Svisualize is ready for use.\n\n## Getting Started\n\nAfter Svisualize is installed in VS Code,\n\n- You will find a new tree icon added to the Activity Bar on the left-hand side. Click on it to launch the extension\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"media/VSCextension.jpg\" alt=\"marketplace\"\u003e\n\u003c/p\u003e\n\n- Select a root file to render your first tree\n  \n** Svisualize currently only supports **SINGLE PAGE** SvelteKit applications **\n\n## Roadmap\n- Support for mutli-page SvelteKit applications\n- Add additional functionality within the visualizer\n    - Delete files on node click\n    - Create new child files from parent nodes\n- More UX/UI options within visualizer (e.g. changing color of nodes based on user preferences)\n- Create a light mode on toggle for webview\n- Addition of a status bar button to toggle extension activation and deactivation\n- Implement more testing\n\n## Contributions\n\nSvisualize 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.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b newFeature`)\n3. Commit your Changes (`git commit -m 'added a newFeature'`)\n4. Push to the Branch (`git push origin newFeature`)\n5. Open a Pull Request\n\nDon't forget to give the project a star! Thank you for your support!\n\n## Meet Our Team\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/lumengli7.png\" width=\"140px;\" alt=\"a photo of Anatoliy Sokolov\"/\u003e\n      \u003cbr /\u003e\n      \u003csub\u003e\u003cb\u003eLumeng Li\u003c/b\u003e\u003c/sub\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://www.linkedin.com/in/lumengli/\" style=\"font-size: 10px;\"\u003eLinkedin\u003c/a\u003e |\n      \u003ca href=\"https://github.com/lumengli7\"\u003eGitHub\u003c/a\u003e\n    \u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/itsdayson.png\" width=\"140px;\" alt=\"a photo of Brian Henkel\"/\u003e\n      \u003cbr /\u003e\n      \u003csub\u003e\u003cb\u003eJason Huang\u003c/b\u003e\u003c/sub\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://www.linkedin.com/in/jasonhswe/\"\u003eLinkedin\u003c/a\u003e |\n      \u003ca href=\"https://github.com/itsdayson\"\u003eGitHub\u003c/a\u003e\n    \u003c/td\u003e \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/krisfragata.png\" width=\"140px;\" alt=\"a photo of Jordan Querubin\"/\u003e\n      \u003cbr /\u003e\n      \u003csub\u003e\u003cb\u003eKris Fragata\u003c/b\u003e\u003c/sub\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://www.linkedin.com/in/krisfragata/\"\u003eLinkedin\u003c/a\u003e |\n      \u003ca href=\"https://github.com/krisfragata\"\u003eGitHub\u003c/a\u003e\n    \u003c/td\u003e \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/calebbelkin.png\" width=\"140px;\" alt=\"a photo of Nathan Peel\"/\u003e\n      \u003cbr /\u003e\n      \u003csub\u003e\u003cb\u003eCaleb Belkin\u003c/b\u003e\u003c/sub\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://www.linkedin.com/in/caleb-belkin/\"\u003eLinkedin\u003c/a\u003e |\n      \u003ca href=\"https://github.com/calebbelkin\"\u003eGitHub\u003c/a\u003e\n    \u003c/td\u003e     \n  \u003c/tr\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fsvisualize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Fsvisualize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Fsvisualize/lists"}