Playground

Token benchmark: YL vs JSON

The same 10 screens as the dropdown above, counted with real tokenizers. The JSON is generated from the parsed YL, so both sides say exactly the same thing with the same defaults. min is minified JSON (the cheapest JSON can get), pretty is how models usually emit it, and tree is the usual generative-UI component tree.

Read it straight: against the leanest possible JSON, YL saves about a third of the tokens. Against JSON as models actually write it, 2.6x to 3.9x. The win is biggest on short control screens (a timer, a camera) and smallest where the screen is mostly the user's own text, which costs the same in any format. The Claude column uses Anthropic's legacy published tokenizer, since current Claude tokenizers are not available offline. Generated 2026-09-24 by bench/bench.mjs.

Screen 1 as a JSON component tree (75 tokens) vs YL (9 tokens)

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

timer 40/20x8 Tabata