Example
Habit grid
Five weeks of history built entirely from stacks.
compositionshapesopacity
json
{
"v": 1,
"refresh": 3600,
"accessibility": "Reading habit, 24 of the last 35 days complete, 6 day streak",
"view": {
"type": "vstack",
"align": "leading",
"spacing": 12,
"padding": 16,
"bg": "#1A1013",
"children": [
{
"type": "hstack",
"align": "center",
"spacing": 8,
"children": [
{
"type": "text",
"text": "Reading",
"style": "headline",
"color": "white"
},
{"type": "spacer"},
{
"type": "text",
"text": "6 day streak",
"style": "caption",
"color": "#D08A7A"
}
]
},
{
"type": "hstack",
"spacing": 6,
"children": [
{
"type": "vstack",
"spacing": 6,
"children": [
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.75
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "#2E1B1F",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.5
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "#2E1B1F",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.75
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
}
]
},
{
"type": "vstack",
"spacing": 6,
"children": [
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "#2E1B1F",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.75
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.5
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "#2E1B1F",
"opacity": 1
}
]
},
{
"type": "vstack",
"spacing": 6,
"children": [
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "#2E1B1F",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.75
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.75
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "#2E1B1F",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.5
}
]
},
{
"type": "vstack",
"spacing": 6,
"children": [
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.5
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.75
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "#2E1B1F",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.75
}
]
},
{
"type": "vstack",
"spacing": 6,
"children": [
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.75
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 0.5
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "#2E1B1F",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
},
{
"type": "vstack",
"children": [],
"w": 30,
"h": 30,
"corner": 8,
"bg": "green",
"opacity": 1
}
]
}
]
},
{"type": "spacer"},
{
"type": "hstack",
"spacing": 8,
"align": "center",
"children": [
{
"type": "text",
"text": "24 of 35 days",
"style": "caption",
"color": "#D08A7A"
},
{"type": "spacer"},
{
"type": "gauge",
"value": 24,
"min": 0,
"max": 35,
"tint": "green",
"w": 120
}
]
}
]
}
}How it works
There is no grid node. A grid is an hstack of vstacks, each cell an empty stack with a w, an h, a corner and a bg — the same shape idiom as the status dot, repeated.
opacity on a cell is what turns one colour into a scale. Every filled cell here is the same green; only the opacity changes, so the whole grid stays legible in dark mode and under tinting.
Thirty-five cells plus their containers is well inside the 300-node ceiling, but it is worth knowing the limit exists before you generate a year of them. See limits.
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/habitsNext
Hello, World! — A tiny feed to confirm everything is connected.
All examples