Example

Deploy status

The latest build result and when it finished.

textcoloursshapes

Deploy status

json

{
  "v": 1,
  "refresh": 300,
  "accessibility": "web-api build 4128 passing, finished 3 minutes ago",
  "url": "https://ci.example.com/runs/4128",
  "view": {
    "type": "vstack",
    "align": "leading",
    "spacing": 0,
    "padding": 15,
    "bg": "#0E1A16",
    "children": [
      {
        "type": "hstack",
        "spacing": 7,
        "align": "center",
        "children": [
          {
            "type": "vstack",
            "children": [],
            "w": 9,
            "h": 9,
            "corner": 4.5,
            "bg": "green",
            "accentable": true
          },
          {
            "type": "text",
            "text": "Passing",
            "style": "subheadline",
            "weight": "semibold",
            "color": "white"
          }
        ]
      },
      {"type": "spacer"},
      {"type": "text", "text": "web-api", "style": "caption", "color": "#7C8A93"},
      {
        "type": "text",
        "text": "#4128",
        "style": "title",
        "weight": "bold",
        "design": "rounded",
        "color": "white"
      },
      {
        "type": "timer",
        "from": "2026-08-11T08:37:00Z",
        "style": "relative",
        "size": 12,
        "color": "#7C8A93"
      }
    ]
  }
}

Built for the small. 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

The smallest useful widget: a status word, a build number and a timestamp. Everything here is a text node inside one vstack, and the whole face is coloured by putting a bg on the root — the root always fills the slot, so its background covers the widget edge to edge.

The status dot is an empty vstack given a width, a height, a corner radius and a background. There is no circle node, and there does not need to be one: a stack with no children sizes to whatever w and h say, so any solid shape you need is a stack with a background.

Colour comes from the semantic name green rather than a hex value, so it stays correct in dark mode and survives the Home Screen's tinted rendering.

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/deploy

Open the raw response →

Next departures — Two buses with live countdowns.
All examples