Token efficiency

opjsx's syntax was tuned to minimize tokens — the unit LLMs read and bill. Measured on a real ~90-element e-commerce page (the example app), tokenized with OpenAI's BPE encoders:

The dot-shorthand variant (no & marker) goes further still — around −31% to −34% — at the cost of needing a tag whitelist to disambiguate text from elements.

Where the savings come from

• No closing tags. JSX pays for </div>, </section>, </button> on every container; indentation replaces them for free.
• No angle brackets or expression braces. <, >, and the {…} around children are gone.
• .class shorthand. &div.card drops className, ", " down to a single ., and className appears on almost every element.

What does not help

These were measured and rejected:

• Abbreviation dictionaries (c for className): worse — BPE already encodes common words like className as ~1 token, and a legend is pure overhead.
• Tabs for indentation: worse — deep tabs tokenize separately.
• Dropping =: ~0 — =" is already a single token.

The lesson

Fewer characters ≠ fewer tokens. The wins came from structural changes (removing whole constructs like closing tags), not from shrinking already-cheap identifiers or punctuation. The remaining tokens are mostly irreducible content — your text, classNames, and the JavaScript inside ${…}.