Click anything in the bar to see the file behind it.
stack.json
{
"region": "menubar",
"display": "all",
"permissions": ["battery", "net", "input", "apps", "audio", "media"]
}
index.html
<div class="bar">
<div class="zone" data-side="left"></div>
<div class="zone" data-side="center-left"></div>
<div class="zone" data-side="center-right"></div>
<div class="zone" data-side="right"></div>
</div>
items/frontmostapp.js
{ id: "frontmostapp", side: "left", order: 10, bold: true,
setup(refresh) {
sd.app.frontmost.subscribe((a) => { cached = a?.name || ""; refresh(); });
},
update() { return cached; },
onClick() { sd.bang("palette.open", { under: "bar" }); } }
items/clock.js
{ id: "clock", side: "left", order: 30, interval: 30,
update() { return formatDateLikeStrftime(new Date()); },
onClick() { sd.proc.exec("/usr/bin/open", ["/System/Applications/Calendar.app"]); } }
items/battery.js
{ id: "battery", side: "right", order: 50,
setup(refresh) {
sd.battery.subscribe((b) => {
cached = `${b.charging ? "{sf:bolt.fill} " : ""}${Math.round(b.percent)}%`;
refresh();
});
} }
items/network.js
{ id: "network", side: "right", order: 55,
setup(refresh) {
sd.net.wifi.subscribe((w) => { wifi = w; recompute(refresh); });
sd.net.lan.subscribe ((l) => { lan = l; recompute(refresh); });
sd.net.path.subscribe((p) => { path = p; recompute(refresh); });
} }
items/inputsource.js
{ id: "inputsource", side: "right", order: 75,
setup(refresh) {
sd.input.layout.subscribe((info) => {
cached = KNOWN[info.layout] || info.layout.slice(0, 2).toUpperCase();
refresh();
});
} }
git clone https://github.com/sryo/stackd ~/Documents/stackd cd ~/Documents/stackd && ./build.sh .build/stackd
Requires macOS 14+. On first launch it asks for Accessibility, and creates
~/stackd/ for your stacks. stackd new hello scaffolds one.
A folder with a stack.json, an index.html and an
index.css. stackd renders it in a transparent WKWebView and feeds it
system state. Drop the folder in and it appears; edit a file and it reloads.
Battery, windows and focus, displays, network, audio, sensors, USB, location, the trackpad's individual fingers, the menu bar. It can also take screenshots, run OCR and speech, open SQLite files and serve HTTP. Permissions are declared per stack.
Because you already know it. The native parts stay native; the visual layer is HTML and CSS, so gradients and layout are the same tools you use everywhere else.
Yes, open source and free to use.