Recipe

Uptime widget design

Embed a live status badge that shows your service health at a glance. Pure HTML + Tailwind, no JavaScript required.

All systems operational

99.99% uptime · last 30d

API

CDN

Auth

The widget above is a static preview. In production, wire it to a health-check endpoint that returns JSON. Use a cron job or edge function to regenerate the badge as an SVG or server-rendered HTML snippet.

GET /api/health

{
  "status": "ok",
  "uptime_pct": 99.99,
  "services": {
    "api": true,
    "cdn": true,
    "db": true,
    "auth": false
  }
}

For a zero-JS embed, serve the badge as an <img> tag pointing to an SVG endpoint. Cache aggressively at the edge. See the status badge recipe for the SVG approach.