HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>live visibility badge</title>
  <style>
    body{font-family:system-ui,sans-serif;margin:1.5rem}
    #status{display:inline-block;padding:.35rem .75rem;border-radius:999px;font-weight:600;background:#dcfce7;color:#166534}
    #status[data-state="hidden"]{background:#fee2e2;color:#991b1b}
  </style>
</head>
<body>
  <p>Tab visibility: <span id="status">...</span></p>
  <p><small>Switch tabs to see the badge update.</small></p>
  <script>
    var badge = document.getElementById("status");
    function renderState() {
      badge.textContent = document.visibilityState;
      badge.dataset.state = document.visibilityState;
    }
    document.addEventListener("visibilitychange", renderState);
    renderState();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document.visibilityState — live badge (Try It)