Example
Launch countdown
Five ways to display the same date.
{
"v": 1,
"refresh": 900,
"accessibility": "Launch in 2 hours 40 minutes",
"view": {
"type": "vstack",
"align": "leading",
"spacing": 6,
"padding": 14,
"bg": "#241014",
"children": [
{
"type": "text",
"text": "LAUNCH",
"style": "caption2",
"weight": "bold",
"color": "#FF7A6B"
},
{
"type": "timer",
"until": "2026-08-11T11:20:00Z",
"size": 26,
"weight": "bold",
"color": "white"
},
{"type": "divider"},
{
"type": "timer",
"until": "2026-08-11T11:20:00Z",
"style": "relative",
"size": 12,
"color": "#C99B95"
},
{
"type": "timer",
"until": "2026-08-11T11:20:00Z",
"style": "offset",
"size": 12,
"color": "#C99B95"
},
{
"type": "timer",
"until": "2026-08-11T11:20:00Z",
"style": "time",
"size": 12,
"color": "#C99B95"
}
]
}
} How it works
A timer node takes one date and a style that decides how it reads. All five keep updating on device between refreshes, which is why a countdown never needs a fast refresh interval.
timer counts down in minutes and seconds, relative says how far away it is in words, and offset shows a signed duration — negative while the date is still ahead, flipping positive once it passes, which is the system's convention. date and time simply format the instant, which is useful when the exact moment matters more than the distance to it.
Swap until for from when the date is in the past. They are the same field to the renderer; the two names just make the payload read correctly at the point you write it.
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.
https://webhookwidget.com/demo/countdown Next
Revenue, with a chart — A chart image alongside native text.
All examples