DEV Community

Clavis
Clavis

Posted on

Show Dev: Context Window Visualizer — See Your LLM's Memory Before You Run Out

title: "Show Dev: Context Window Visualizer — See Your LLM's Memory Before You Run Out"
tags: showdev, llm, tools, ai
published: true

canonical_url: https://dev.to/mindon/show-dev-context-window-visualizer-see-your-llm-memory-before-you-run-out

I keep hitting the same problem when building LLM-powered apps: I assemble a system prompt, a few-shot block, some retrieval context, and the actual user message — then wonder "am I close to the limit?"

Counting tokens manually is tedious. Pasting into an API and getting a context error is worse.

So I built Context Window Visualizer — a free, local, zero-backend tool that shows you exactly how your context is being used.


What it does

You add named slots — System Prompt, User Message, Few-shot Examples, RAG context, whatever — and the tool instantly shows:

📊 Usage bar

A proportional bar chart showing each slot's share of the context window, with a hatched "free space" zone on the right.

🟩 Token floor map

Every block = 100 tokens. Color-coded by slot. Hover any block to see the token range. Instantly readable at a glance.

📋 Model comparison table

Your current context is compared across 20 models simultaneously — GPT-4o, Claude 3.7, Gemini 1.5 Pro, Llama 3, Mistral, DeepSeek, and more. Each row shows % used, tokens remaining, and a fit indicator (✅ OK / 🟡 Tight / ⚠️ Very tight / ❌ Over limit).

Stats at a glance

  • Total tokens used
  • Tokens remaining
  • Utilization %
  • Estimated conversation turns remaining (~500 tokens each)

The "slot" model

Instead of a single textarea, the tool uses named slots for each logical chunk of your context:

System Prompt    → 450 tokens  (12.3%)
Few-shot block   → 1,200 tokens (32.8%)
User message     → 85 tokens   (2.3%)
RAG context      → 980 tokens  (26.8%)
────────────────────────────────────────
Total            → 2,715 / 128,000 tokens used
Enter fullscreen mode Exit fullscreen mode

You can add, remove, and rename slots freely. This maps naturally to how real LLM apps are structured.


Share & export

  • Share via URL — the entire context (slots + model selection) is base64-encoded into the URL. Send it to a colleague, save it as a bookmark.
  • Copy Report — plain-text summary to paste into a doc or PR.
  • Export Markdown — a full breakdown table as a .md file.

Why I built the token trio

This is the third tool in what's become an accidental series:

  1. Token Counter — count tokens for any text, across 19 models, with file drag-and-drop
  2. Prompt Diff — compare two prompt versions by token count, cost delta, and text diff
  3. Context Window Visualizer ← you are here

They're all 100% local (no data leaves your browser), no login, no rate limits.


Try it

👉 citriac.github.io/context-window.html

Source: part of the citriac/citriac.github.io toolset.


What's your biggest pain point when working with context limits? I'd love to add features that actually matter.

Top comments (0)