Here’s how I created a Real-Time Discord Badge for Github Readme 🌠

Posted on by — No Comments ↓

Hello all, I’m back with another project. This time, I built a Real-Time Discord badge that shows the total member count.

badge

In this blog, I will share with you:

  • Why did I build this?
  • Why add a dynamic Discord badge to your GitHub Readme?
  • A step-by-step guide to adding this badge to your GitHub README, including how to customize it.
  • How I handled real-time Discord data, added Redis caching, managed rate limits, and made it fast.

So, let’s start. 3… 2… 1… 🌱

 

Why did I build this?

I want to tell you a super short story for this. The company for which I’m working wanted me to add a dynamic Discord badge to their GitHub README that shows the total member count.

I tried searching on the web. After a lot of searching, I found that Discord already provides a “Server Widget JSON API”. For this, you have to go to your Discord server settings > engagement, and then turn on the widget, and you will be able to find the API link and the Server ID.

server widget

You can create a badge using this Server ID as shown below: 

[![demo](https://img.shields.io/discord/YOUR_SERVER_ID?logo=discord)](https://discord.gg/INVITE_CODE)

But the thing is, it will only show the online members count and not all the members.

online count badge

I tried to search a lot about “how to show all members’ count”, but I wasn’t able to find any.

And thus, I decided to create one. It was super easy. When I built it for my company, I realized there may be more people who want this badge as well, so I made it public for the community.

I don’t know if such badges are already there in the market or not. I tried to find a lot, and the disappointment made me build it. If you know any such badges or methods to show dynamic Discord badges that update in real-time, then please let me know in the comment section.

 

Why add Discord Live Members Count Badge to your GitHub Readme?

Many open-source projects and communities wanted to showcase their Discord server growth on their GitHub READMEs because:

  • The bigger the community, the more trust it builds. Thus, showing your total Discord members count will not only market your product, but also build trust in future users.

  • Real-time metrics make your README dynamic. It gives a sense that the project is active and maintained.

  • Attracts contributors and collaborators. A growing community signals engagement, which can draw in more developers.

  • Helps community managers track growth. Badges provide a quick glance at server stats without needing to log into Discord.

  • Encourages more users to join. Seeing a badge with large numbers can trigger FOMO and boost Discord join rates.

  • Improves project credibility. Just like stars and forks, community size becomes a social proof metric.

  • Easier comparison between similar projects. Potential users can quickly evaluate community support through visible numbers.

And the most important point, “SNEAK-PEEK YOUR RIVALS OR ENEMY, OR FRIEND DISCORD COMMUNITY MEMBERS“. I don’t know about you, but I do it. All you need is their Server ID. Keep reading the blog, and I will tell you how to do this. (I’m not promoting any such activities. It’s bad. Anyway, I don’t care. 😂)

 

Step-by-Step Guide: Adding Discord Live Members Count Badge to Your GitHub README

Let’s get your Discord badge up and running in less than 5 minutes!

Step 1: Add the Live Count Bot to Your Server

First, you need to invite my bot to your Discord server:

🤖 Click here to add the bot

The bot needs minimal permissions:

  • View Channels (to access your server)
  • Manage Channels (for member counting)

Step 2: Enable Server Widget

This is crucial – without this step, your badges won’t work!

  1. Right-click your server name → Server Settings
  2. Navigate to Engagement → Server Widget
  3. Toggle ON the “Enable Server Widget” option
  4. Copy your Server ID (you’ll need this!)

Still facing difficulty? Follow the Documentation here

What if you’re not a core member of the Discord server? The above option is present only for the server owner, admins, and moderators (sometimes). But if you’re none of them and still want to add this badge? Remember, I told you above the “Sneak-Peek” thing? We will apply it here.

If you’re not a core member and still want to add this badge or want to sneak peek, then follow the steps below:

  1. Open your Users Settings
  2. Navigate to Advanced
  3. Toggle ON the “Developer Mode” option
  4. Now, right-click on any server and you will get an option to Copy Server ID

Step 3. Customize your Badge

Let’s make it fast and as simple as possible.

Copy this template, add your Server ID and Invite Link(optional, but important) in the corresponding places, and paste it in your GitHub Readme. 

[![discord members](https://discord-live-members-count-badge.vercel.app/api/discord-members?guildId=YOUR_SERVER_ID_HERE)](https://discord.gg/YOUR_NEVER_EXPIRY_INVITE_CODE_HERE)

It will show the total Discord member counts (including the bots).

I have made multiple endpoints, check it out here:
endpoints

You can check the endpoints using this link:

  1. Discord Members: 
  https://discord-live-members-count-badge.vercel.app/api/discord-members?guildId=YOUR_SERVER_ID_HERE

2. Discord Bots: 

  https://discord-live-members-count-badge.vercel.app/api/discord-bots?guildId=YOUR_SERVER_ID_HERE

3. Discord Total: 

  https://discord-live-members-count-badge.vercel.app/api/discord-total?guildId=YOUR_SERVER_ID_HERE

But, do you like to customize it more??
Well, I have this. I have included three extra parameters to make it more customizable for you.

  • color (optional) – Hex color without # (default: 7289DA)
  • label (optional) – Custom text label (default: varies by endpoint)
  • scale (optional) – Size multiplier from 0.5 to 10.0 (default: 1)

You can use them as:
Badge Code: 

[![discord members](https://discord-live-members-count-badge.vercel.app/api/discord-members?guildId=YOUR_SERVER_ID&color=27ae60&label=Users&scale=2)](https://discord.gg/your-invite)

Endpoint: 

https://discord-live-members-count-badge.vercel.app/api/discord-members?guildId=YOUR_SERVER_ID&color=27ae60&label=Users&scale=2

Output:
custom

Same for other endpoints. Btw, pink is my favorite color. I don’t know why I created a green badge. Maybe the devil made me do it.

There’s a possibility that you might get frustrated because you have to change the color and scale multiple times to get your best. Each time, you have to wait for the page to reload or hit enter.

To become your HERO again, I built the website too.




Discord Badge

Add beautiful, real-time Discord member count badges to your GitHub README

favicon
discord-live-members-count-badge.vercel.app

The interface is simple. But there are two things to be noticed:

1. Badge Generator

This is simple, add your Server ID and Invite Link. Click on Generate, and your badges will be generated. Copy and paste it directly into the readme.

generator

2. Interactive Playground

Don’t want to manually customize badges? I built an interactive playground where you can:

  • 🎨 Pick colors from presets or use custom hex codes
  • 📝 Edit labels with live preview
  • 📏 Adjust scaling with a visual slider
  • 📋 Copy ready-to-use markdown code

🚀 Try the Playground

Playground Screenshot

 

How did I build it?

In this section, I will try to explain how I built this web application.

Step 1. Creating the Discord Bot

  1. Go to Discord Developer Portal
  2. Create a new application
  3. Go to the Bot section
  4. Create a bot and copy the token
  5. Invite the bot to your server with these permissions:
    • View Channels
    • Manage Channels

In Privileged Gateway Intents, Presence Intent and Server Members Intent must be enabled.

Bot Permissions
For this case, the bot needs minimal permissions:

  • View Channels (1024)
  • Manage Channels (16)

Total permission integer: 1040

Step 2. Routes and API

discord-members API

It fetches the approximate member count using Discord’s /guilds/{guildId}?with_counts=true endpoint. 

const r = await axios.get(`https://discord.com/api/v10/guilds/${guildId}?with_counts=true`, {
  headers: { Authorization: `Bot ${process.env.DISCORD_BOT_TOKEN}` },
});

*Caching * is not implemented in this route due to the approximate and fast nature of the API call.

discord-bots API

It counts bots in a guild using the fetchAllMembers() utility. 

const members = await fetchAllMembers(guildId);
const botCount = members.filter((m) => m.user.bot).length;

Key Points:

  • Calls Discord’s /guilds/{guildId}/members endpoint (paginated).
  • Requires member intent (Privileged Intent must be enabled).
  • Filters bot users using m.user.bot.
  • Uses caching to reduce repeated heavy calls. (in utils)

discord-total API

It combines both bot and human user counts. 

const members = await fetchAllMembers(guildId);
const botCount = members.filter((m) => m.user.bot).length;
const humanCount = members.length - botCount;

Key Points:

  • Same logic and fetching as discord-bots.
  • Shows combined info like 22 users, 5 bots.

fetchAllMembers Utility

Paginate through all members of a guild using Discord’s API. 

while (keepFetching) {
  const res = await axios.get(`https://discord.com/api/v10/guilds/${guildId}/members`, {
    headers: { Authorization: `Bot ${DISCORD_BOT_TOKEN}` },
    params: { limit: 1000, after },
  });
  ...
}

Caching:

  • Tries Redis first using key guild:{guildId}:members. 
  if (redis) {
    try {
      const cached = await redis.get(cacheKey);
      if (cached) {
        console.log(`[Cache] HIT for ${guildId}`);
        return JSON.parse(cached);
      } else {
        console.log(`[Cache] MISS for ${guildId}`);
      }
    } catch (err) {
      console.warn(`[Cache] Redis error on GET: ${err.message}`);
    }
  }
  • On cache MISS, fetches from Discord and caches the result.
  • TTL is controlled via CACHE_TTL environment variable (default 300 seconds).

Rate Limiting Handling:

  • If API responds with 429, waits for retry_after seconds, and retries.
  • Adds setTimeout between requests to avoid hitting limits. 
if (err.response?.status === 429) {
  const retryAfter = err.response.data?.retry_after || 1;
  await new Promise((r) => setTimeout(r, retryAfter * 1000));
  continue;
}

Badge Generation

All routes use the badge-maker package: 

let svg = makeBadge({
  label,
  message,
  color,
  style: 'flat',
  logoBase64: `data:image/svg+xml;base64,${discordLogoBase64}`,
});

Scaling: Optional scale param adjusts badge size. 

if (scale !== 1) {
  svg = svg
    .replace(/<svg([^>]+?)width="(d+)" height="(d+)"/, ...)
    .replace(/<svg[^>]*>/, `$1<g transform="scale(${scale})">`)
    .replace(/</svg>/, '</g></svg>');
}

Error Handling: If any call fails, a red “error” badge is returned.

Quick Summary

  • discord-members = fast estimate, no intents.
  • discord-bots & discord-total = precise, uses member list and cache.
  • fetchAllMembers handles paging, rate limits, and caching.

The setup supports scaling, CDN caching, and proper Discord rate limit compliance.

Step 3. Create UI and Deploy.

You can use any AI tool for creating the UI. I used V0 by Vercel. Also, for deploying my application, I used Vercel.

See it in Action

 

Check out the GitHub repository for the Source Code (liked this project? Star it 🌠):

GitHub logo

RS-labhub
 /
Discord-Live-Members-Count-Badge

Add beautiful, real-time Discord member count badges to your GitHub README

banner

🎯 Discord Live Members Count Badge

Add beautiful, real-time Discord member count badges to your GitHub README

License: MIT
Live Site
Portfolio

✨ Features

  • 🔄 Real-time Updates – Live member count with smart caching (5-minute intervals)
  • 👥 Multiple Badge Types – Total members, human-only, or bot-only counts
  • 🛡️ Safe & Secure – Uses Discord API’s with_counts=true for public access
  • ⚡ Serverless Ready – Deploy to Vercel, Railway, Render, or any platform
  • 🎨 Fully Customizable – Custom colors, labels, and scaling options
  • 📱 Mobile Responsive – Optimized playground interface for all devices
  • 📦 Zero Config – Just add your bot and start using

🎬 Project Showcase

Preview Description
YouTube Demo 🎬 YouTube Demo
Click the image to watch the full demo.
Blog Post 📝 Blog Post
Read the blog for in-depth explanation.

🚀 Quick Start

1. Add Bot to Your Server

First, invite our bot to your Discord server:

🤖 Add Bot to Server

2. Enable Server Widget

  1. Go to…
View on GitHub

 

Wait, wait, wait! Did you just ask for a Video Explanation? I have it for you already. Check it out here:

 

[ ] PROMOTION:

For the default badges on the website and the readme, I have used LLMWare’s Discord Server with their consent. If you don’t know, llmware just launched “Model HQ: Your Private AI Companion“. The interesting part is that it runs locally and without internet.

Want to know more about it? Read it here

LLMWare


How to Run AI Models Privately on Your AI PC with Model HQ; No Cloud, No Code

Rohan Sharma for LLMWare ・ Jun 27

#ai
#security
#nocode
#showdev

 

Conclusion

In short, try this once and let me know your feedback. I don’t usually say it, but save this blog for the future and star the GitHub Repository.

All links in one place:

If you want me to RAISE A PR for this badge on your GitHub repository, then let me know in the comment section.

Also, in case you want to know more about me, here’s my Portfolio (and yeah, try to find out the secret page, it’s still waiting for you.)

Thanks for reading till here. You’re awesomeeeeeeeeeee. Here’s a hug from me 🫂. Keep growing. You’re the best. 🫀

Leave a Reply