Example

Server health

CPU, memory, disk, and load at a glance.

gaugetintlayout

Server health

json

{
  "v": 1,
  "refresh": 600,
  "accessibility": "CPU 34 percent, memory 71 percent, disk 52 percent",
  "view": {
    "type": "vstack",
    "spacing": 6,
    "padding": 18,
    "bg": "#041624",
    "children": [
      {
        "type": "hstack",
        "spacing": 6,
        "align": "center",
        "children": [
          {
            "type": "text",
            "text": "eu-west-1",
            "style": "caption",
            "weight": "semibold",
            "color": "#ddd"
          },
          {"type": "spacer"},
          {"type": "text", "text": "4 nodes", "style": "caption", "color": "#aaa"}
        ]
      },
      {
        "type": "hstack",
        "spacing": 20,
        "align": "center",
        "children": [
          {
            "type": "vstack",
            "spacing": 5,
            "align": "center",
            "children": [
              {
                "type": "gauge",
                "value": 0.34,
                "style": "ring",
                "label": "34%",
                "tint": "green",
                "w": 54,
                "h": 54
              },
              {
                "type": "text",
                "text": "CPU",
                "style": "caption2",
                "color": "#aaa"
              }
            ]
          },
          {
            "type": "vstack",
            "spacing": 5,
            "align": "center",
            "children": [
              {
                "type": "gauge",
                "value": 0.71,
                "style": "ring",
                "label": "71%",
                "tint": "yellow",
                "w": 54,
                "h": 54
              },
              {
                "type": "text",
                "text": "Memory",
                "style": "caption2",
                "color": "#aaa"
              }
            ]
          },
          {
            "type": "vstack",
            "spacing": 5,
            "align": "center",
            "children": [
              {
                "type": "gauge",
                "value": 0.52,
                "style": "ring",
                "label": "52%",
                "tint": "green",
                "w": 54,
                "h": 54
              },
              {
                "type": "text",
                "text": "Disk",
                "style": "caption2",
                "color": "#aaa"
              }
            ]
          },
          {"type": "spacer"},
          {
            "type": "vstack",
            "spacing": 2,
            "align": "leading",
            "children": [
              {
                "type": "text",
                "text": "Load",
                "style": "caption2",
                "color": "#aaa"
              },
              {
                "type": "text",
                "text": "0.84",
                "style": "title2",
                "weight": "semibold",
                "design": "rounded",
                "color": "#ddd"
              }
            ]
          }
        ]
      },
      {"type": "spacer"},
      {
        "type": "gauge",
        "value": 0.62,
        "min": 0,
        "max": 1,
        "label": "Requests / capacity",
        "tint": "blue"
      }
    ]
  }
}

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

Use a ring for a compact proportion, or a bar when you have more horizontal space. Both use value, with optional min and max values.

The three rings are an hstack of vstacks — the standard way to build a row of equal columns. Nothing here sets a width: each column sizes to its content and the stack spaces them out.

tint colours the filled part of the gauge. The unfilled track is drawn from the same colour at low opacity, so a single token gives you both.

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

Open the raw response →

The day ahead — Four scheduled views from one response.
All examples

Server health

How it works

Put it on your Home Screen

Next