A tool to visualize Val Town projects as both text trees and interactive diagrams.
Features
Visualize any Val Town project structure
Display as both text tree and interactive visual diagram
Expand/collapse directories in the visual view
Zoom controls for better navigation of large projects
Color-coded file types for easier identification
Usage
Enter a Val Town project in one of these formats:
Username/project (e.g., moe/MiniAppStarter)
Val Town web URL (e.g., https://val.town/x/moe/MiniAppStarter)
Val Town module URL (e.g., https://esm.town/v/moe/MiniAppStarter)
Click "Visualize" to generate the project structure
Use the expand/collapse buttons to navigate the tree
Use zoom controls to adjust the view for larger projects
Project Structure
/backend - Server-side code for the API
/frontend - Client-side UI components and styles
/shared - Shared utilities used by both frontend and backend
How It Works
The visualizer fetches the project structure using Val Town's listFiles utility, then creates both a text representation and an interactive diagram of the file structure.
Development
To modify this project:
Edit the backend API in /backend/index.ts
Modify the tree generation logic in /shared/projectTree.ts
Update the UI components in the /frontend directory