Yui Lines token benchmark

Generated 2026-09-24 by bench/bench.mjs (npm run bench). Ten sample screens from site/lib/yl/samples.mjs, the same ones the playground renders.

The JSON side is generated from the parsed YL, so it carries exactly the same information and the same defaults. Three JSON shapes:

• min: minified flat array, the cheapest JSON possible.
• pretty: the same array, 2-space indented, which is how models usually emit JSON.
• tree: a component-tree document ({screens:[{children:[{type,props}]}]}), the usual generative-UI schema shape.

Tokenizers:

• o200k_base via js-tiktoken (GPT-4o / GPT-5 family)
• cl100k_base via js-tiktoken (GPT-4 / GPT-3.5)
• @anthropic-ai/tokenizer (Anthropic's published legacy Claude tokenizer; current Claude models are not public offline)

Tokens per screen (o200k_base)

Totals across tokenizers

Saved screens: bringing one back (o200k_base)

An agent that saved a screen (save workout) reopens it later with show workout instead of sending the whole screen again (YL.md section 5). The person can also tap it on the shelf, which costs no tokens at all.

Screen 1, all four encodings

YL (9 tokens):

timer 40/20x8 Tabata

JSON min (25 tokens):

[{"type":"timer","work":40,"rest":20,"rounds":8,"label":"Tabata"}]

JSON tree (75 tokens):

{
  "screens": [
    {
      "id": "1",
      "children": [
        {
          "type": "Timer",
          "props": {
            "work": 40,
            "rest": 20,
            "rounds": 8,
            "label": "Tabata"
          }
        }
      ]
    }
  ]
}

Caveats

• Current Claude tokenizers are not published for offline use and this machine has no Anthropic API key for count_tokens, so the Claude column uses Anthropic's legacy published tokenizer. Treat it as indicative. The ratios agree across all three tokenizers.
• The JSON is the most generous version of JSON: short keys, defaults omitted. Hand-written or schema-validated JSON from a real generative-UI framework is usually longer, so the real-world gap is wider than the min column.
• Output tokens are what matter for latency: at ~50-100 output tokens per second, every 10 tokens saved is 0.1-0.2 s before the screen appears. Streaming YL also renders line by line, so the first component appears after its own line, not after the whole document closes.