@rezi-ui/jsx¶

Native JSX runtime for Rezi widgets. Write widget trees using JSX syntax instead of the ui.* function API.

Installation¶

npm install @rezi-ui/jsx

TypeScript configuration¶

Add to your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@rezi-ui/jsx"
  }
}

Use .tsx file extensions for files containing JSX.

Overview¶

@rezi-ui/jsx provides a custom JSX runtime that maps JSX elements directly to Rezi VNodes. Unlike @rezi-ui/ink-compat, this does not use React — it's a thin layer over the native ui.* API.

Available elements¶

All ui.* widget functions are available as JSX intrinsic elements with capitalized names:

`ui.*` API	JSX element
`ui.text(...)`	`<Text>`
`ui.box(...)`	`<Box>`
`ui.row(...)`	`<Row>`
`ui.column(...)`	`<Column>`
`ui.button(...)`	`<Button>`
`ui.input(...)`	`<Input>`
`ui.table(...)`	`<Table>`
`ui.modal(...)`	`<Modal>`
`ui.divider(...)`	`<Divider>`
...	(all 50+ widgets)

Example¶

import { createApp, rgb } from "@rezi-ui/core";
import { createNodeBackend } from "@rezi-ui/node";

const app = createApp({
  backend: createNodeBackend(),
  initialState: { count: 0 },
});

app.view((state) =>
  <Column p={1} gap={1}>
    <Text style={{ fg: rgb(120, 200, 255), bold: true }}>Counter</Text>
    <Row gap={2}>
      <Text>Count: {state.count}</Text>
      <Button id="inc" label="+1" />
    </Row>
  </Column>
);

await app.start();

Fragments¶

Use fragments to group elements without a wrapper:

<>
  <Text>Line 1</Text>
  <Text>Line 2</Text>
</>