HomeMachine Learning & Neural NetworksGrammar-Constrained Decoding Visualizer (2D)

Grammar-Constrained Decoding Visualizer (2D)

A 2D token-by-token grammar-constrained decoding visualizer: a finite-state JSON grammar masks an LLM's logits so only structurally valid tokens can ever be sampled, shown as a live bar chart and a draggable, zoomable automaton graph, compared against unconstrained sampling that can break the output.

Machine Learning & Neural Networks2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-ai-topic-9 ↗ Open standalone

Structured-output tools keep an LLM's JSON valid by walking a finite-state grammar alongside generation and masking every token that would break the schema before the softmax ever runs. This 2D simulator builds a real ten-state automaton for a small {"name": …, "age": …} object, samples tokens step by step from a live bar chart of the masked (or unmasked) next-token distribution, and animates a marker travelling a draggable, zoomable automaton state graph as each token is accepted. Toggle constrained decoding off to watch unconstrained sampling occasionally pick a structurally illegal token and break the run — the same failure mode grammar-constrained decoding exists to eliminate — and track the valid-JSON success rate across runs live.

⚙ Under the hood

A 2D token-by-token grammar-constrained decoding visualizer: a finite-state JSON grammar masks an LLM's logits so only structurally valid tokens can ever be sampled, shown as a live bar chart and a draggable, zoomable automaton graph, compared against unconstrained sampling that can break the output.

llmdecodinggrammarjson-schemastructured-outputfinite-state-machine

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)