tsxon

Author React UI in a compact, token-efficient template syntax — then render it.

import { tsxon } from "tsxon";

function Hello({ name }: { name: string }) {
  return tsxon`
    &div.greeting
      &h1
        Hello ${name}
      &button onClick"${() => alert("hi")}"
        Say hi
  `;
}

&tag.class for elements, attr"value" for props, indentation for nesting, ${…} for dynamic values, handlers, and .map(). ~25–35% fewer tokens than the equivalent JSX.

Install

pnpm add tsxon react

Documentation

Full syntax, API, token-efficiency notes, and the copy-and-install Claude skill:

📖 https://zahinafsar.github.io/tsxon

License

MIT