Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/zshall/program-guide/llms.txt

Use this file to discover all available pages before exploring further.

This guide walks you through cloning the repository and getting the simulator running in your browser. Because Television Simulator ‘99 is a collection of plain static files — HTML, pre-compiled CSS, and vanilla JavaScript — you only need a simple HTTP server to serve them. There is no build step, no npm install, and no configuration file to edit before the TV turns on.
1

Prerequisites

You need a tool that can serve static files over HTTP. Any of the following work:
  • Python 3 (ships with macOS and most Linux distributions)
  • Node.js with npx serve (available wherever Node is installed)
  • Any other local HTTP server (VS Code Live Server, Apache, nginx, Caddy, etc.)
The simulator uses the YouTube IFrame API, which requires a network connection — the embedded player will not initialise if the page is opened directly as a file:// URL.
No build step is required. The repository ships with a pre-compiled css/site.css, so you do not need node-sass, Sass, or any other toolchain to run the project. SCSS source files are included only if you want to customise the styles.
2

Clone the Repository

Clone the project from GitHub using the command below, then move into the project directory:
git clone https://github.com/zshall/program-guide.git
cd program-guide
Alternatively, download a ZIP archive from the GitHub Releases page and extract it.
3

Start a Local HTTP Server

Serve the files from the root of the repository. Choose whichever tool you have available:
python3 -m http.server 8080
python3 -m http.server 8080 starts a server on port 8080 (the port is explicit in the command; Python’s built-in server defaults to 8000 when no port is given). npx serve binds to port 3000 (or the next available port) and prints the exact URL to the terminal.
4

Open the Simulator in Your Browser

Navigate to the address printed by your server:The page loads index.html, which is the sole entry point for the application.
5

Watch the TV Boot Up

The simulator starts automatically. Here is what happens in sequence:
  1. The YouTube IFrame API script is injected into the page head by YouTubeApi.loadYouTubeAPI().
  2. Once the API fires onYouTubeIframeAPIReady, the TV class fetches data/guide.xml via $.ajax.
  3. guide.xml is parsed and the channel marked default and watchable — Channel 12 (PRV) — is selected automatically.
  4. channels/012/layout.html is loaded into the screen area and Channel12.show() initialises the YouTube player, the scrolling marquee, and the live program grid.
  5. The screen fades in over the 3-second warmup interval defined in the TV constructor.
The channel number briefly appears in the top-right corner of the screen, just like a real TV. Click the small button on the TV bezel to toggle the credits overlay, and click the mute button to silence the video.

​
Running with Docker

The official Docker image is the fastest way to share the simulator with others or deploy it to a server — no local toolchain required.
Pull the image from Docker Hub and run it with a single command: 
docker pull zshall/television-simulator
docker run -p 8080:80 zshall/television-simulator
Then open http://localhost:8080 in your browser. The container serves the static files over port 80 internally; the -p 8080:80 flag maps that to port 8080 on your host.

​
Customising the Channel Listings

All channel data — show names, timeslots, notices, and ad copy — lives in data/guide.xml. Open the file in any text editor and you will find clearly structured <channel>, <listing>, <notice>, and <ad> elements. Edit the existing entries or add your own channels and the guide grid will reflect your changes immediately on the next page load. 
<!-- data/guide.xml excerpt -->
<channel number="3" name="KCBS">
  <notice>The Greenhill County public offices will be closed Monday, May 3, 1999.</notice>
  <listing timeslot="19" type="1">News</listing>
  <listing timeslot="20" type="1">Bold and the Beautiful</listing>
</channel>
For next steps, see:

Build docs developers (and LLMs) love

Get started for freeTalk to us