See Which Tokens an LLM Draws From, Right in Your Browser

Canonical version: See Which Tokens an LLM Draws From, Right in Your Browser.

Isham Faizal published a small experiment on September 7, 2026: an LLM attention visualizer. You hover over (or tap) any token a model generated, and the earlier tokens that fed into it light up.

It's one of the clearest ways I've seen to build an intuition for AI Attention without reading a single equation.

What you see

The prompt and the response are shown as plain text. When you point at a generated token, every previous token gets an opacity based on how much it contributed. The strongest contributor is fully opaque, and the rest fade proportionally.

Two examples from the post stood out to me:

• Copying: in the "Office Move Summary" prompt, hover over an address or a date the model copied verbatim. The original data in the prompt lights up strongly. The model isn't regenerating the address from memory. It looks back and pulls it from the source
• Combining: the word "remain" in "Existing access cards and phone numbers remain" draws from "work" in one sentence of the prompt and "stay the same" in another. The model merges two phrases into one word

The first one answers a question many people have (Isham included): if LLMs predict tokens probabilistically, why are they so reliable at copy-pasting? Because every token has access to ALL previous tokens, and the model can choose to draw almost entirely from the source. In the "Debugging an Average Function" example, a 600M-parameter model reproduces a whole JavaScript function except for the intended fix. (It still needed hints to find the bug, though 😅)

Keep in mind that it's simplified

The value shown per token is the attention weight, scaled by the magnitude of the value vector, aggregated across all attention heads, and summed across all layers. That throws a LOT of information away. So "contributed" is an approximation, not a precise explanation of the model's reasoning.

Still, it produces patterns that make sense, which is what makes it a good teaching tool.

How it's built

This is where things get interesting for developers:

• A React app (built with Vite and TypeScript) using Transformers.js to run the model in a Web Worker
• The model is Qwen3-0.6B, int8-quantized, roughly 618 MB, running locally in the browser. Your prompts never leave your machine
• Pre-generated examples load instantly, so you don't have to wait for the download to explore
• The generation loop is custom (Isham vibe-coded it), because the standard loop doesn't expose the values needed for the visualization

The trickiest part: Transformers.js runs ONNX files, which contain the whole computation graph, and the runtime is compiled to WebAssembly. You can only read the outputs the graph defines. Internal tensors aren't accessible.

The fix was to modify the ONNX file itself. A small script promotes the post-rotary-embedding query tensor of each of the 28 transformer layers to an extra graph output, without changing the weights, operators, or normal outputs. The instrumented model is published on HuggingFace as ishamf/Qwen3-0.6B-ONNX-Instrumented.

That's a neat trick worth remembering: if a browser model hides something you need, you can edit the graph to expose it.

References

• Blog post and live demo: https://ishamf.dev/p/llm-attention-visualizer/
• Source code (MIT): https://github.com/ishamf/llm-visualizer
• Instrumented model: https://huggingface.co/ishamf/Qwen3-0.6B-ONNX-Instrumented

Related

• AI Attention
• Transformers
• Transformers.js
• ONNX
• ONNX Runtime Web
• Qwen
• Large Language Models (LLMs)
• Small Language Models (SLMs)
• HuggingFace

About Sébastien

Ready to get to the next level?