tfl-ts and tfl-components

Typed TfL client plus the React boards that render it. Homepage dashboard here; docs on npm and tfl.manglekuo.com.

v0.0.3
🍰
🏃
🎓
Beginner
demo
#tfl#transport-for-london#typescript#api#client#london#transport#underground#tube#bus... and 23 more

Live TfL dashboard

Live data through tfl-ts. Boards from tfl-components.

tfl-componentstfl-ts on npm

Central

  • Westbound · Platform 1
  • Eastbound · Platform 2

Victoria

  • Northbound · Platform 6
  • Southbound · Platform 5

Bakerloo

  • Northbound
    • No information
  • Southbound · Platform 3

G

27

  • 27

205

  • 205
  • 205

Minor Delays

Victoria
  2. Northern
  6. JubileePiccadilly
  7. BakerlooCentral
  8. Northern

Documentation

tfl-ts and tfl-components

London already publishes the arrivals. The work is getting them onto a screen that still looks like TfL.

tfl-ts is the typed client. tfl-components is the board library that draws what the client returns. The preview above is the same dashboard as the tfl-components homepage: Oxford Circus rail, Trafalgar Square buses, nearby cycle hire, Victoria strip. Treat it as a sample. For how to build, read the npm page and tfl.manglekuo.com.

The client

tfl-ts wraps the everyday calls (line, stopPoint, journey) and keeps raw.* for endpoints the wrappers do not cover. Line names, station order, and colours ship in the package. Status and arrivals hit TfL at runtime. Latest on npm is 2.9.0.

pnpm add tfl-tsLanguage: bash
import TflClient from "tfl-ts"; const client = new TflClient({ appKey: process.env.TFL_APP_KEY });const tube = await client.line.getStatus({ modes: ["tube"] });Language: ts

One key from the TfL API Portal. Set TFL_APP_KEY. app_id has been unused since 2021.

Gotchas, MCP, and the Next.js pattern live on the npm page.

The boards

tfl-components is the React library that goes with it. Arrivals, status, bus, cycle hire, maps, line strips, and the chips those boards are built from. Install a board, pass it data from tfl-ts.

pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/rail-arrivals-board.jsonLanguage: bash

Start at the docs. The explorer is the fastest way to see how stop IDs and lines actually relate. If you only want a tablet on the wall, there is Board.