claude-count-tokens
A GitHub-style heatmap for your Claude Code token usage. Add it to your website — it stays up to date automatically. why? · leaderboard
Why does this exist?
If you're on a Claude subscription plan (Pro, Team, or Enterprise), the Claude Console doesn't show your token-level usage for Claude Code. The usage page shows zeros — no activity, no spend, no breakdown.
This widget reads your local Claude Code logs directly from your machine and gives you a clear picture of how much you're actually using it — by day, by hour, by token type.
Claude Console showing zero usage for subscription plan users
Claude Console usage page — no token data available for subscription plan users.
live preview
try a palette
made with by vitoria
three commands, then you're done
1
Log in with GitHub
npx claude-count-tokens login
2
Upload your token data
npx claude-count-tokens sync
3
Auto-sync every hour
npx claude-count-tokens sync --install
Add two lines to your website
<script src="https://unpkg.com/claude-count-tokens/widget/claude-token-heatmap.js"></script>
<claude-token-heatmap user="YOUR_GITHUB_USERNAME" palette="spring"></claude-token-heatmap>

Works with any site — plain HTML, Next.js, Astro, Hugo, Jekyll, WordPress. No build step, no dependencies.

Architecture
Your Mac
~/.claude/projects/
→
Cloud
Supabase Storage
→
Your Website
<claude-token-heatmap>
The flow
login Authenticates you via GitHub so we know your username
sync Reads your local Claude Code logs, aggregates token counts, uploads a small JSON file
auto-sync A background job on your Mac re-syncs every hour so your widget is always current
widget A self-contained web component that fetches your JSON and renders the heatmap
Privacy
Only aggregated token counts are synced to the cloud — no prompts, no code, no conversation content. The sync uploads a small JSON file with daily/hourly token totals. Everything else stays on your machine.
Dark mode

The widget automatically follows your site's theme. It detects dark mode from:


  • prefers-color-scheme (system preference)
  • class="dark" on <html> or <body>
  • data-theme="dark" on <html> or <body>

To force a specific theme:

<claude-token-heatmap user="you" theme="dark"></claude-token-heatmap>
Color palettes

The default palette is spring. Pick a different one with the palette attribute:

<claude-token-heatmap user="you" palette="mint"></claude-token-heatmap>


Or define your own with CSS custom properties:

claude-token-heatmap {
  --cth-cell-l1: #d4e4c8;
  --cth-cell-l2: #b5cda3;
  --cth-cell-l3: #94b47e;
  --cth-cell-l4: #6e9a56;
}
Sizing

The widget fills its container by default. Customize with CSS:

claude-token-heatmap {
  max-width: 600px;     /* constrain width */
  --cth-cell-s: 10px;   /* cell size (default 13px) */
  --cth-cell-g: 2px;    /* gap (default 3px) */
  --cth-cell-r: 2px;    /* border radius (default 3px) */
}

Automatically shrinks on screens narrower than 700px.

CLI reference
# dashboard
npx claude-count-tokens                     # live dashboard on port 7890
npx claude-count-tokens --port 3000         # custom port
npx claude-count-tokens --days 90           # last 90 days only

# auth
npx claude-count-tokens login               # log in with GitHub
npx claude-count-tokens logout              # log out, clear credentials

# sync
npx claude-count-tokens sync                # upload token data to cloud
npx claude-count-tokens sync --install      # auto-sync every hour (macOS)
npx claude-count-tokens sync --uninstall    # remove auto-sync
npx claude-count-tokens sync --status       # check if auto-sync is running

# export
npx claude-count-tokens export              # export to ./claude-token-data.json
npx claude-count-tokens export -o out.json  # custom output path
What gets counted

The widget reads local JSONL logs that Claude Code writes at ~/.claude/projects/. For each AI response, it sums:


TypeWhat it is
Inputtokens in your prompt
Outputtokens Claude generated
Cache writetokens written to context cache
Cache readtokens read from context cache

This only counts Claude Code CLI usage from your machine's local logs.

Requirements
  • Node.js 18+
  • Claude Code installed (creates ~/.claude/projects/)
  • macOS for auto-sync (Linux users can use a cron job instead)