Numbers

A strip of numbers that matter. Zero and unknown are left out; it scrolls sideways on a phone.

  • kit.stats()
  • 436 B of CSS · 12 rules
  • kit.css
  • No script needed
watching now
1,204
people chatting
48
streams live
12

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.stats([[1204, 'watching now'], [48, 'people chatting'], [12, 'streams live', '/live']]);

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.stats([[1204, 'watching now'], [48, 'people chatting'], [12, 'streams live', '/live']]);
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 242 B
<dl class="ovk-stats" aria-label="In numbers" tabindex="0"><div><dt>watching now</dt><dd>1,204</dd></div><div><dt>people chatting</dt><dd>48</dd></div><div class="ovk-stat--link"><dt><a href="/live">streams live</a></dt><dd>12</dd></div></dl>

What it weighs

Its own rules are 1.2 KB, 436 B as sent: 2% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.

It is also drawn natively: Jetpack Compose and SwiftUI.