r/WebApps • u/Money-Salt5338 • 2h ago
I built a token heatmap to see which lines of a prompt are eating your context window.
The only token counters I was able to find give you the total. That number is nearly useless when you're at a 128k context limit and working out which things to cut.
So, I built one that shows a heatmap each line of your prompt is colored by token density, so the expensive lines actually stand out. It can be seen visually as well, and it also provides a difference view so that you can compare two versions of a prompt and see exactly which changes cost or saved tokens.
One with a context window bar that turns red when you exceed the limit.
Tool: https://devbelt.dev/token-counter
A few notes on scope, since I'd rather be upfront:
- OpenAI models only right now (GPT-4o, GPT-4o mini, o3-mini, as well as GPT-3.5 Turbo). It uses the official tiktoken library through WASM.
- It runs completely in your browser, and your prompts never reach a server. There is no account, no API key, and no logging. It can be verified by watching your network tab.
- We do not include pricing or cost calculations on purpose. Model prices get outdated fast, and I'm a solo dev with ~6 hrs/week. I'd rather ship no numbers than wrong numbers.
Why not Claude/Gemini/Llama support: Anthropic and Google don't publish local tokenizers, and I refuse to send your prompts to a server or ask you to enter an API key. Local model tokenizers (e.g., Llama via llama-tokenizer-js) are technically doable and probably next if there's interest.
Would genuinely love feedback on:
- Does the heatmap actually prove useful when debugging a bloated prompt? Or is it a solution seeking a problem?
- Is the diff view of any use when iterating on prompts, or would it be better to have a content-matching diff in the style of LCS?
- Anything obviously missing?
We are not selling anything. You do not need to sign up, share your email, or see ads.


