A command-driven counter (deaths, w/d/l, etc.) that can be displayed on an overlay


I’ve built these commands, together with its accompanying overlay, to address a particular need of mine: often during my streams, I make a pun so groan-inducing that the viewers’ usual reaction is “God damn, Saico” :joy: - thus it deserved a special counter, a la deaths and w/d/l rates.
The problem is, although Streamlabs - my tool of choice - allows you to easily manipulate and display numeric variables via its Cloudbot, it provides no means of exporting them to an external resource such as a screen overlay.

Enter CountAPI, which is free, very simple to use and was built specifically to handle such automated counting scenarios. As it only speaks JSON, Nightbot’s JavaScript-fu capabilities are the perfect pairing.
First, you need to explicitly create a key with reset enabled - you can use the browser for this step, Nightbot isn’t required:
Replace <namespace> with whatever value you fancy. Now check the output - more importantly, write down the value under "key":

Now it’s time for Nightbot to join the fray - you might want to customize the command names and messages to your liking:
!addcom -cd=5 !incrcount Counter updated $(eval const count = $(urlfetch json https://api.countapi.xyz/hit/<namespace>/<key>); count.value) times.
!addcom -ul=mod !zerocount Counter reset to $(eval const count = $(urlfetch json https://api.countapi.xyz/set/<namespace>/<key>?value=0); count.value).

And done! Next step is creating an overlay that polls https://api.countapi.xyz/get/<namespace>/<key> and updates the count accordingly - I’ll post a sample HTML later today.

P.S.: so, while writing down this post I found out there are other similar recipes which make use of the Quote API promoted on this forum. However, I still prefer mine for its smaller footprint and ease of setup (no need for secret keys!)


As promised here’s a very straightforward sample for an overlay:

    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');
        body {
            font-size: 48px;
            font-family: "Raleway";
            color: #FFFFFF;
            filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.1));
    <script lang="javascript">
        const namespace = 'insert value here';
        const key = 'insert value here';
        const url = `https://api.countapi.xyz/get/${namespace}/${key}`;
        function poll() {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.responseType = 'json';
            xhr.onload = () => {
                let el = document.getElementById('count');
                el.textContent = xhr.response.value;
    Count: <span id="count"></span>