# Introduction
A `.tsrx` file is TypeScript with HTML-like markup in it, plus blocks like
`@if` and `@for` for showing something only sometimes, or once per item in a
list. yuku-tsrx reads those files.
It is a parser, an analyzer, and a code generator for `.tsrx`, written in Zig,
with a JavaScript API on top of a native addon. You call it from Node, you get
back a real TSRX syntax tree, and you can hand a tree back to it and get source
out again.
```js
import { parseModule, walk } from "yuku-tsrx";
const program = parseModule(source, "Cart.tsrx");
walk(program, {
JSXCodeBlock(node) {
// every TSRX code block in the file
},
});
```
## What a `.tsrx` file looks like
```tsrx
export function Cart({ items }): unknown @{
const total = items.length;
@if (total > 0) {
@for (const item of items; index i; key item.id) {
{i}:{item.id}
} @empty {
empty
}
} @else {
no cart
}
}
```
Three things in that file are not TypeScript and not JSX: the `@{ }` code block
that lets statements and markup sit next to each other, the `@if` / `@for`
directives with their `; index` and `; key` clauses and `@empty` branch, and the
`