Val Town Project Visualizer

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

  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

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:

  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

License

MIT