Get real-time TfL (Transport for London) service status in a straightforward and minimalist design. No more fumbling through apps or web pages to know if your line is running smoothly. Built with pure JavaScript (ok, a tiny bit of CSS to allow the new Overground line colours to be striped), and calling the TfL API directly, this lightweight tool can be easily integrated into your workflow or dashboard.
Experience Super Simple TfL Status in action with these quick demo links, or embed these pages in your home automation dashboard.
| Description | Live Link |
|---|---|
| Tube Only | 🚇 Tube |
| Elizabeth Line Only | 🚆 Elizabeth Line |
| Tube + Elizabeth Line | 🚇🚆 Combo 1 |
| Tube + Overground | 🚇🚞 Combo 2 |
| All Modes | 🌐 All Modes |
| All Modes + Names | 🌐 All Modes + Names |
Click on the live links to explore different configurations and find the one that suits you the best!
- 🚀 Fast: Fetches and displays statuses in seconds
- 🎨 Colour-Coded: Uses official TfL line colours for quick identification
- 🔍 Configurable: Choose which modes of transport to display
- 🛠 Simple Codebase: Easy to extend or modify
- A modern web browser
- Internet connection
You can use the hosted version at https://tfl-status.cynexia.com or run your own:
- Clone the repository:
git clone https://github.com/mnbf9rca/super_simple_tfl_status.git - Open
index.htmlin your web browser.
mode: Choose the mode of transportation. Default is "tube,elizabeth-line". Example:?mode=tube,dlr. Options are any accepted by the TfL API, although some, likebusare obviously less useful. You can see all available options by using the TfL API Portal to query for 'all valid modes'.names: Display the names of the lines. Default is false. Example:?names=true. See below for more info.
Combine parameters like this: ?mode=tube&names=true
Understand how the names parameter changes the display when there are disruptions or no disruptions:
| Scenario | names=true |
names=false |
|---|---|---|
| No Disruptions | Shows "Good service on all lines". | Shows "Good service on all lines". |
| Some Disruptions | Shows disrupted lines with their names, followed by "Good service on all other lines." | Shows only the colours of disrupted lines. |
| All Lines Disrupted | Shows all lines with disruptions and their names. | Shows only the colours of all disrupted lines. |
Feel free to open issues or submit pull requests. Every contribution is welcome!
This project is licensed under the MIT License. TfL API subject to TfL's terms.