React UI that
speaks fluent token.
A compact, indentation-based template syntax for React. Same components, far fewer tokens — built for the era where AI reads and writes your UI.
$ pnpm add opjsxHOW IT WORKS
Same UI. Fewer tokens.
Every token an LLM reads or writes costs money and context. opjsx drops closing tags, angle brackets, and {} wrappers — so the model processes the same component in a fraction of the tokens.
Fit ~31% more UI per request
The leaner the markup, the more of your interface fits in a single context window — cheaper generations, fewer truncations, faster responses.
Write
Author your tree with &tag.class, attr"value", and indentation — no closing tags.
Parse
opjsx turns the template into a plain JSON element tree, preserving ${…}.
Render
The tree becomes React.createElement calls. Real React, zero build step.
WHY IT MATTERS FOR AI
Tokens are the budget.
Lower token cost
Fewer tokens in and out means cheaper generations on every render.
More context
Fit more of your UI in one window — fewer truncations and retries.
Same React
Identical semantics — it compiles to standard React.createElement.
Works wherever React runs
Ship UI in fewer tokens.
One import, no build step. Add opjsx and return a template.