A self-hosted, fully customizable SVG view counter for your GitHub README. Built with Vercel + Supabase — free, fast, supports multiple users, supports repository visit count.
- Profile visitor's count — each GitHub user gets their own count
- Repository visitor's count — each GitHub repo gets its own count
- No signup required — just add your username to the URL
- Fully customizable — colors, styles, layout, font size, icon, etc
- Multiple layouts — horizontal, vertical, split
- Multiple styles — rounded, square, no background, invisible
- Abbreviated counts — 12345 → 12.3K
- Base count — add an offset to your counter
- Invisible mode — count silently without showing anything
Add this to your GitHub profile README.md:
Important
Replace your-username with your actual GitHub username.
Add this to your repository's README.md:
Important
Since the counter tracks by username string, make your repo identifier unique to avoid accidentally sharing a count with someone else's repo of the same name. A good pattern is to append a random number:
your-reponame-5318 → unique, collision-free
Examples:
Repo Identifier to use my-portfoliomy-portfolio-2947view-counterview-counter-5318awesome-projectawesome-project-8821
| Parameter | Default | Description |
|---|---|---|
username |
(required) | Your GitHub username |
base |
0 |
Number added to the real count |
abbreviated |
false |
true → shows 12.3K instead of 12345 |
icon |
true |
false to hide the eye icon |
iconSize |
16 |
Icon size in pixels |
iconColor |
same as color |
Icon color (hex or rgba) |
label |
Profile views: |
Label text. Set to false to hide |
labelColor |
same as color |
Label text color |
color |
#aaaaaa |
Count text color (fallback for all colors) |
size |
13 |
Font size in pixels |
style |
rounded |
rounded · square · nobg · invisible |
layout |
horizontal |
horizontal · vertical · split |
bgColor |
rgba(255,255,255,0.08) |
Background color |
labelBgColor |
rgba(255,255,255,0.05) |
Left section color in split layout |
Both hex and rgba are supported for all color parameters.
<!-- Hex (with or without #) -->
?color=58a6ff
?color=%2358a6ff
<!-- rgb or rgba -->
?color=rgb(88,166,255)
?color=rgba(30,30,30,0.9)Tip
Use color as your base color — it automatically applies to the icon, label, and count unless you override them individually with iconColor or labelColor.
Popular color themes:
Theme Preview color bgColor GitHub Blue 58a6ffrgba(56,139,253,0.1)GitHub Green 3fb950rgba(46,160,67,0.1)GitHub Orange f78166rgba(247,129,102,0.1)GitHub Purple bc8cffrgba(188,140,255,0.1)White on Dark ffffffrgba(30,30,30,0.9)Minimal Grey aaaaaargba(255,255,255,0.05)
Controls the shape and background of the badge (default: rounded).
| Style | Preview | Usage |
|---|---|---|
rounded |
?style=rounded |
|
square |
?style=square |
|
nobg |
?style=nobg |
|
invisible |
(renders nothing) | ?style=invisible |
Tip
use "invisible" mode when you want to have counter without displaying it.
Controls the arrangement of the icon, label, and count (default: horizontal).
| Layout | Preview | Usage |
|---|---|---|
horizontal |
?layout=horizontal |
|
vertical |
?layout=vertical |
|
split |
?layout=split |
| Preview | Usage |
|---|---|
?label=visitors: |
|
?label=repo+views: |
|
?label=profile+visits: |
Note
Use + for spaces in the URL -- eg: ?label=profile+views
Tip
Otptional but Add : in end to make it look good -- eg: ?label=visitors:
| Preview | Usage |
|---|---|
?label=false |
| Color | Preview | Usage |
|---|---|---|
| Orange | ?label=f78166 |
|
| Green | ?label=3fb950 |
|
| Blue | ?label=58a6ff |
| Preview | Usage |
|---|---|
?icon=false |
| Color | Preview | Usage |
|---|---|---|
| Orange | ?iconColor=f78166 |
|
| Green | ?iconColor=3fb950 |
|
| Blue | ?iconColor=58a6ff |
| iconSize | Preview | Usage |
|---|---|---|
12 |
?iconSize=12 |
|
16 (default) |
?iconSize=16 |
|
24 |
?iconSize=24 |
size controls the font size of label and count
| size | iconSize | Preview | Usage |
|---|---|---|---|
11 |
13 |
?size=11&iconSize=13 |
|
13 (default) |
16 (default) |
?size=13&iconSize=16 |
|
16 |
20 |
?size=16&iconSize=20 |
Note
iconSize scales the icon independently.
Shortens large numbers for a cleaner look. -- eg: 1.000 → 1K
| Preview | Usage |
|---|---|
?abbreviated=false (default) |
|
?abbreviated=true |
Add an offset to the real count. Useful when migrating from another counter and you want to preserve your existing views.
| Preview | Usage |
|---|---|
?base=0 (default) |
|
?base=1000 |
- Go to supabase.com and create a free project
- Open SQL Editor and run:
CREATE TABLE counters (
username TEXT PRIMARY KEY,
count INTEGER DEFAULT 0
);
CREATE OR REPLACE FUNCTION increment_counter(uname TEXT)
RETURNS INTEGER AS $$
INSERT INTO counters (username, count)
VALUES (uname, 1)
ON CONFLICT (username)
DO UPDATE SET count = counters.count + 1
RETURNING count;
$$ LANGUAGE SQL;- Go to Settings → API and copy your Project URL and anon public key
mkdir github-view-counter && cd github-view-counter
mkdir apiCreate package.json:
{
"name": "github-view-counter",
"version": "1.0.0",
"dependencies": {
"@supabase/supabase-js": "^2.0.0"
}
}npm installnpm i -g vercel
vercel login
vercel --prodIn your Vercel dashboard → Settings → Environment Variables:
| Name | Value |
|---|---|
SUPABASE_URL |
https://your-project.supabase.co |
SUPABASE_KEY |
sb_publishable_xxxx... |
Then redeploy:
vercel --prod- No authentication or signup is needed
- Counts are public — anyone can see the count by loading the image
- Only the username and view count are stored — nothing else
- Vercel — serverless API hosting (free tier)
- Supabase — PostgreSQL database (free tier)
- SVG — rendered inline as an image, no external dependencies
MIT license — free to use, fork, and self-host.