Val Town Project Visualizer

A tool to visualize Val Town projects as both text trees and interactive diagrams.

• 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

1. 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)
2. Click "Visualize" to generate the project structure
3. Use the expand/collapse buttons to navigate the tree
4. Use zoom controls to adjust the view for larger projects

• /backend - Server-side code for the API
• /frontend - Client-side UI components and styles
• /shared - Shared utilities used by both frontend and backend

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.

To modify this project:

1. Edit the backend API in /backend/index.ts
2. Modify the tree generation logic in /shared/projectTree.ts
3. Update the UI components in the /frontend directory

MIT