Public
Like
registry
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
A comprehensive file management system for Val Town that handles different file types including HTTP, cron, email, JSON, and more with collaborative editing capabilities.
- Multi-file type support: HTTP, cron, email, JSON, TypeScript, and more
- Specialized editors: Dedicated editors for different file types with type-specific features
- Collaborative editing: Real-time collaboration using YJS with ts-editor component
- TypeScript editor: Full-featured TypeScript editor with syntax highlighting
- File type detection: Automatic file type detection and routing to appropriate editors
- KV-based storage: Simple and reliable KV storage for all data
- Configurable URLs: All service URLs are configurable via config.json
-
Sync Service (
/sync
):- Syncs Val Town files to both Yjs and KV storage
- Stores complete zons list in KV for gallery view
- Enables collaborative editing via Yjs
- Provides reliable KV backup for HTTP services
-
HTTP Services (
/zons
,/zon
,/file.*
):- Direct KV access for fast, reliable data reads
- Simple and predictable performance
- No complex middleware or fallback logic
-
Editor Integration:
- ts-editor connects to Yjs for real-time collaboration
- File content synced to both Yjs (for collaboration) and KV (for HTTP services)
- Best of Both Worlds: Collaborative editing + simple HTTP services
- Reliability: KV storage ensures HTTP services always work
- Performance: Direct KV access for fast response times
- Collaboration: Yjs enables real-time collaborative editing
- Simplicity: HTTP services remain clean and straightforward
├── config.json # Configuration file with URLs and file type definitions
├── zons # Main gallery view showing all zons (HTTP)
├── zon # Individual zon view with file listings (HTTP)
├── file # Original file editor (HTTP) - deprecated
├── file.http # HTTP file editor with specialized features (HTTP)
├── file.cron # Cron/interval file editor with scheduling features (HTTP)
├── file.email # Email file editor with email-specific features (HTTP)
├── file.readme # README/Markdown file editor with preview (HTTP)
├── file.default # Default file editor for all other file types (HTTP)
├── sync # Background sync service for YJS collaboration (Cron)
└── README.md # This file
The system uses /config.json
for configuration:
{ "urls": { "zons": "https://zons.val.run", // Main gallery URL "zon": "https://zon.val.run", // Individual zon view URL "files": "https://svc.val.run" // File editor URL }, "editor": { "yjs": { "room": "@vals", // YJS collaboration room "url": "wss://hp.cfapps.us10-001.hana.ondemand.com" // YJS WebSocket URL } }, "fileTypes": { // File type definitions with icons, colors, templates, etc. } }
- HTTP (
http
) - Web endpoints and APIs - Cron (
cron
) - Scheduled tasks - Email (
email
) - Email handlers - JSON (
json
) - Configuration and data files - TypeScript (
ts
) - General TypeScript files - JavaScript (
js
) - JavaScript files - Markdown (
md
) - Documentation files
GET /
- Main gallery showing all zons- Displays all available zons with metadata
GET /
- Redirects to main galleryGET /{zon-name}
- View files in specific zonGET /{zon-name}/files
- API endpoint returning JSON list of files- Groups files by type and shows file metadata
The file editing system is now split into specialized handlers based on file type:
- Purpose: Edit HTTP endpoint handlers
- Features:
- HTTP-specific UI with green theme
- Direct "Run HTTP" button that opens the endpoint
- Specialized templates for HTTP handlers
- Handles: Files with
type: "http"
ortype: "script"
- Purpose: Edit scheduled task handlers
- Features:
- Cron-specific UI with blue theme
- "Schedule" button linking to Val Town scheduling UI
- Templates for interval/cron handlers
- Handles: Files with
type: "interval"
ortype: "cron"
- Purpose: Edit email processing handlers
- Features:
- Email-specific UI with purple theme
- "Test Email" button for email testing
- Templates for email handlers
- Handles: Files with
type: "email"
- Purpose: Edit documentation and README files
- Features:
- Documentation-focused UI with gray theme
- Markdown language support
- Preview functionality (planned)
- Handles: Files named "README*", "*.md", or with
type: "md"
- Purpose: Edit all other file types (TypeScript, JavaScript, JSON, etc.)
- Features:
- Generic file editing interface
- Auto-detection of file types
- Redirects specialized files to appropriate editors
- Handles: All files not handled by specialized editors
- Status: Deprecated but maintained for compatibility
- Purpose: Original unified file editor
- Recommendation: Use specialized editors instead
Each specialized editor follows the same routing pattern:
GET /
- Redirects to main galleryGET /{zon-name}/{file-name}
- Edit specific file with specialized interfaceGET /{zon-name}/{file-name}/raw
- Get raw file content as JSONPOST /{zon-name}/{file-name}
- Save file changes
The system automatically routes files to the appropriate specialized editor:
- HTTP files (
type: "http"
ortype: "script"
) →file.http
- Cron files (
type: "interval"
ortype: "cron"
) →file.cron
- Email files (
type: "email"
) →file.email
- README files (filename contains "readme", ends with ".md", or
type: "md"
) →file.readme
- All other files →
file.default
The file.default
handler includes automatic redirection logic to send specialized files to their appropriate editors.
GET /
- Redirects to main gallery (configurable)GET /{zon-name}/{file-name}
- Edit specific file with ts-editorGET /{zon-name}/{file-name}/raw
- Get raw file content as JSONPOST /{zon-name}/{file-name}
- Save file changes
- Cron job that syncs Val Town files to YJS documents
- Enables real-time collaborative editing
- Runs periodically to keep YJS documents up to date
- Browse zons: Visit main gallery to see all available zons
- Select zon: Click on a zon to view its files grouped by type
- Edit file: Click on a file to open it in the collaborative editor
- Save changes: Use the Save button to persist changes back to Val Town
- Run HTTP files: Use the Run button to test HTTP endpoints
The system integrates with:
- Yjs: Primary data source for real-time collaborative editing
- KV Storage: Backup data source when Yjs is not available or still connecting
- ts-editor: For TypeScript/JavaScript editing with syntax highlighting
- Sync Service: Syncs Val Town files to both Yjs (for collaboration) and KV (for HTTP services)
- HTTP Services: Read directly from KV storage for all data needs
- Editor Integration: ts-editor connects to Yjs for real-time collaborative editing
- Zons List: Complete list of zons stored in KV for fast gallery loading
zons:list
- Complete list of all zons for gallery viewval:{valName}
- Val metadata (name, id, files list, etc.)file:{valName}:{fileName}
- File metadata (type, path, etc.)content:{valName}:{fileName}
- File content (up to 1MB per file)
- HTTP Services: Simple, fast KV reads with no complex logic
- Collaborative Editing: Real-time collaboration via Yjs in the editor
- Data Reliability: Dual storage ensures data availability
- Performance: Direct KV access for predictable response times
- All URLs are configurable via
config.json
- File types can be extended by adding to the
fileTypes
configuration - Authorization is currently disabled for development (returns true)
- Error handling includes proper error propagation and user feedback