Integrations

Player Count for JG-Hud

JG-HudQBCoreESXJG-Scripts

Framework

QBCore | ESX

Updated

3/13/2026

Author

HSC

Overview

Added the number of online players to the HUD!

Folder/Files we will edit

client/cl-nearest-postal | web/dist/index.html

What to edit

Head over to the client folder and click on cl-nearest-postal

At the bottom of the file add Snippet 1

Now head over to web/dist/index.html

Before the closing body tag [</body>] add Snippet 2

Requirements

Jg-hud V1.3.2

VSC [Visual Studio Code] for editing the code XD

Notes

Please note that this is a workaround and nothing offical. This is also using UNLOCKED files which is why its in a werid location/file.

F.A.Q

Q: Is this offically supported by JG?

A: Not as of 3/13/2026, but maybe it will in the future :)

Snippet 1

client/cl-nearest-postal.lua

lua

-- Nearest postal edit
CreateThread(function()
  while true do
    local count = #GetActivePlayers()

    SendNUIMessage({
      action = "jg-hud:setPlayerCount",
      count = count
    })

    Wait(5000)
  end
end)

Snippet 2

web/dist/index.html

html

<div
      id="jg-player-count"
      style="
        position: fixed;
        top: 210px;
        right: 30px;
        z-index: 999999;
        padding: 8px 12px;
        border-radius: 10px;
        background: rgba(10, 10, 10, 0.55);
        color: white;
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.3px;
        display: none;
        pointer-events: none;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
      "
    >
      👥 <span id="jg-player-count-value">0</span>
    </div>

    <script>
      (() => {
        const container = document.getElementById("jg-player-count");
        const value = document.getElementById("jg-player-count-value");

        window.addEventListener("message", (event) => {
          const data = event.data;
          if (!data) return;

          if (data.action === "jg-hud:setPlayerCount") {
            value.textContent = data.count ?? 0;
            container.style.display = "block";
          }
        });
      })();
    </script>