Skip to content

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

fntokenxray

See where your tokens go.

License: MIT

Live demo (coming soon)


Paste an LLM prompt. See a token-by-token cost heatmap. Find out which parts of your prompt are expensive -- and which models are cheapest.

The problem

LLM sticker shock is real. Token counters give you a number, but a number doesn't tell you where the cost is hiding. Is it the system prompt? The few-shot examples? That JSON blob you pasted in?

fntokenxray gives you a heatmap. Every word in your prompt is colored by its token density -- green for efficient, red for expensive. You see the shape of your costs at a glance.

What you get

  • Token count -- estimated total for your prompt
  • Cost estimate -- at the selected model's published input pricing
  • Heatmap -- every word colored green-to-red by token density (tokens per visible character)
  • Model comparison table -- same prompt, every model, sorted by cost

Supported models

Model Provider Input / 1M tokens
Claude Opus 4.6 Anthropic $15.00
Claude Sonnet 4.6 Anthropic $3.00
Claude Haiku 4.5 Anthropic $0.80
GPT-4o OpenAI $2.50
GPT-4o mini OpenAI $0.15
Gemini 2.5 Pro Google $1.25

Accuracy

Token counts are estimates, not exact. The tokenizer uses word-length heuristics (short words = 1 token, long words = 2-3 tokens, ~4 chars/token average). This is accurate enough for cost comparison and spotting expensive sections, but not a substitute for running text through an actual BPE tokenizer.

Development

pnpm install
pnpm dev

Build for production:

pnpm build
pnpm preview

Support

If this tool saved you from a surprise API bill:

License

MIT

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages

Generated from fntemplate/npm