TMG Studio

A web-based game editor for TSL + TME.

Features

• Code editor with line numbers, syntax highlighting, autocomplete & signature help
• Diagnostics, find & replace (Ctrl+F / Ctrl+H), F3 / Shift+F3 to jump between matches
• Project explorer with auto-sync
• Preview panel with hot reload and pop-out window
• Build & run with live output
• Project management (New/Open, Recent Projects)
• Built-in docs: TSL / TME / API reference / Usage guide (TH + EN)
• Spotify status bar: now-playing label, transport controls, device picker, Favorite button, and a Music dialog (search / favorites / playlists)
• Dark theme with orange accent, local fonts only (JetBrains Mono), radius 0

Install

npm install -g tmg-studio

Usage

tmg

Starts the local server and opens TMG Studio in your browser (http://localhost:3000). If the port is busy, the next free port is used automatically.

Options

| Flag | Description | |------|-------------| | -p, --port <n> | Port to listen on (default 3000) | | --no-open | Do not open the browser automatically | | -v, --version | Print version | | -h, --help | Show help |

Environment

| Variable | Description | |----------|-------------| | TMG_PORT | Default port | | TMG_HOME | Data directory (default ~/.tmg-studio) |

Keyboard shortcuts

| Keys | Action | |------|--------| | Ctrl+S | Save file (triggers debounced hot-reload build) | | Ctrl+F / Ctrl+H | Find / Find & replace | | F3 / Shift+F3 | Next / previous match | | F5 | Run game | | Ctrl+Shift+B | Build | | Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z | Undo / redo | | Ctrl+[ / Ctrl+] | Outdent / indent | | Tab / Shift+Tab | Indent, or accept autocomplete suggestion | | ↑ ↓ + Enter / Tab | Pick an autocomplete suggestion | | Escape | Close menus, widgets, and dialogs |

Requirements

• Node.js >= 18
• git (the New Project dialog clones TME/TSL, Update runs git pull)
• Network access the first time a project is created
• TME CLI at TME/tme/bin/tme for Build / Run (cloned with a new project)
• Optional: a Spotify Premium account for playback controls and the Music dialog

Development

node server/server.js   # or: npm start

Then open http://localhost:3000.

Project Structure

tmg-studio/
├── bin/
│   └── tmg.js            # CLI entry (`tmg`)
├── server/
│   ├── server.js         # HTTP server
│   ├── router.js         # API routes
│   ├── project.js        # Project state
│   ├── project-create.js # New Project (clones TME/TSL)
│   ├── project-open.js   # Open existing project
│   ├── build.js          # Build via TME CLI
│   ├── game-runner.js    # Run/preview the game
│   ├── tsl-compiler.js   # TSL diagnostics
│   ├── tsl-symbols.js    # TSL symbol index (autocomplete)
│   ├── tme-api.js        # TME API data
│   ├── asset-manager.js  # Project assets
│   ├── update-manager.js # Update TME/TSL
│   ├── file-system.js    # File APIs
│   ├── process.js        # Child-process helpers
│   └── paths.js          # Package & data paths
├── public/
│   ├── index.html        # Main layout
│   ├── style.css         # Styling
│   ├── app.js            # Main app logic
│   ├── editor.js         # Code editor
│   ├── explorer.js       # Project explorer
│   ├── preview.js        # Preview panel
│   ├── hot-reload.js     # Save → build → reload preview
│   ├── autocomplete.js   # Suggestions
│   ├── signature-help.js # Function parameter hints
│   ├── syntax.js         # TSL highlighting
│   ├── icons.js          # Inline icon set
│   ├── spotify.js        # Spotify status bar, Music dialog, favorites
│   ├── usage-docs.html   # Usage Docs content (TH + EN)
│   ├── fonts/            # JetBrains Mono (local)
│   ├── spotify-player.js # Spotify Web Playback SDK (vendored, unmodified)
│   ├── spotify-embedded/ # Spotify SDK iframe (vendored, unmodified)
│   └── ...               # logo, favicon
├── api.json              # TME API reference data
└── tsl-api.json          # TSL API reference data

Spotify

1. Create an app at developer.spotify.com/dashboard, register the exact redirect URI shown in TMG's dialog (e.g. http://127.0.0.1:3000), and enable Web API + Web Playback SDK.
2. Click the Spotify label in the status bar → paste your Client ID → Approve.
3. The status shows exactly one of: Spotify / song name / Nothing playing / Premium required — details live in the tooltip.
4. Transport: ▶ play/pause and ⏭ next. Next dims itself whenever the queue has nothing to skip to (a single search song, the last track of Favorites/Playlists) and comes back once Spotify's autoplay hands playback over. Log out ends the session from the status bar.

Vendored Spotify files

public/spotify-player.js and public/spotify-embedded/ are Spotify's own Web Playback SDK, shipped unmodified and excluded from this project's license headers.

License

GPL-3.0-or-later

Owner: Time And Time Studio