Example

Next departures

Two buses with live countdowns.

timerstacksspacer

Next departures

json

{
  "v": 1,
  "refresh": 300,
  "accessibility": "Bus 42 to Kings Cross in 6 minutes, bus 17 to Angel in 14 minutes",
  "url": "https://tfl.gov.uk",
  "view": {
    "type": "vstack",
    "spacing": 10,
    "padding": 14,
    "bg": "#121319",
    "children": [
      {
        "type": "hstack",
        "spacing": 8,
        "align": "center",
        "children": [
          {
            "type": "text",
            "text": "Camden Road",
            "style": "caption",
            "weight": "semibold",
            "color": "#8E8E93"
          },
          {"type": "spacer"},
          {
            "type": "text",
            "text": "Southbound",
            "style": "caption",
            "color": "#8E8E93"
          }
        ]
      },
      {
        "type": "hstack",
        "spacing": 10,
        "align": "center",
        "children": [
          {
            "type": "zstack",
            "align": "center",
            "w": 38,
            "h": 26,
            "corner": 6,
            "bg": "#E4322B",
            "children": [
              {
                "type": "text",
                "text": "42",
                "weight": "bold",
                "size": 15,
                "color": "white"
              }
            ]
          },
          {
            "type": "text",
            "text": "Kings Cross",
            "style": "headline",
            "color": "white"
          },
          {"type": "spacer"},
          {
            "type": "timer",
            "until": "2026-08-11T08:46:00Z",
            "size": 22,
            "weight": "semibold",
            "color": "white"
          }
        ]
      },
      {"type": "divider"},
      {
        "type": "hstack",
        "spacing": 10,
        "align": "center",
        "children": [
          {
            "type": "zstack",
            "align": "center",
            "w": 38,
            "h": 26,
            "corner": 6,
            "bg": "#2B6FE4",
            "children": [
              {
                "type": "text",
                "text": "17",
                "weight": "bold",
                "size": 15,
                "color": "white"
              }
            ]
          },
          {"type": "text", "text": "Angel", "style": "headline", "color": "white"},
          {"type": "spacer"},
          {
            "type": "timer",
            "until": "2026-08-11T08:54:00Z",
            "size": 22,
            "weight": "semibold",
            "color": "#B4B4BC"
          }
        ]
      }
    ]
  }
}

Built for the medium. The roomier sizes show the same payload with space to spare; a tighter slot gets its own tree from the server, not this one shrunk.

How it works

Two rows, each an hstack: route badge, destination, countdown. A spacer between the destination and the time pushes them to opposite edges, which is how you get a flush right column without knowing how wide anything is.

The countdowns are timer nodes. They keep counting on the device between refreshes, so this widget stays correct for the full fifteen minutes until its next fetch instead of going stale the moment it is drawn. That is the single most useful thing in the protocol — see timelines and refreshes.

Each route badge is the same empty-stack shape idiom as the deploy example, with a text laid over it by a zstack.

Put it on your Home Screen

This example is served live, with timestamps generated at the moment of the request. Add the URL as a hook in the app and it will work on a real phone.

URL

https://webhookwidget.com/demo/departures

Open the raw response →

Server health — CPU, memory, disk, and load at a glance.
All examples