OpenTUI

https://opentui.com/docs/getting-started/

Admin

OpenTUI is a native terminal UI core written in Zig with TypeScript bindings, providing a...

Tokens:744

Snippets:10

Trust Score:5.7

Update:3 months ago

Show doc for...

Tokens:

Raw

### Initialize Project and Install OpenTUI Core

Source: https://opentui.com/docs/getting-started

This snippet shows how to create a new project directory, initialize it with Bun, and add the OpenTUI core package. Ensure you have Bun installed.

```bash
mkdir my-tui && cd my-tui
bun init -y
bun add @opentui/core
```

--------------------------------

### Run Hello World Application

Source: https://opentui.com/docs/getting-started

Command to execute the TypeScript 'Hello world' example using Bun.

```bash
bun index.ts
```

--------------------------------

### Hello World with OpenTUI

Source: https://opentui.com/docs/getting-started

A basic 'Hello, OpenTUI!' application. It creates a CLI renderer and adds a Text component with green foreground color. Requires Node.js 26.3.0 with experimental FFI enabled for native rendering.

```typescript
import { createCliRenderer, Text } from "@opentui/core"

const renderer = await createCliRenderer({
  exitOnCtrlC: true,
})

renderer.root.add(
  Text({
    content: "Hello, OpenTUI!",
    fg: "#00FF00",
  }),
)
```

--------------------------------

### Composing Components with OpenTUI

Source: https://opentui.com/docs/getting-started

Demonstrates nesting components by creating a bordered panel with a title and a message. It uses Box and Text components, where the first argument to factory functions is props and subsequent arguments are children.

```typescript
import { createCliRenderer, Box, Text } from "@opentui/core"

const renderer = await createCliRenderer({
  exitOnCtrlC: true,
})

renderer.root.add(
  Box(
    { borderStyle: "rounded", padding: 1, flexDirection: "column", gap: 1 },
    Text({ content: "Welcome", fg: "#FFFF00" }),
    Text({ content: "Press Ctrl+C to exit" }),
  ),
)
```

Tokens:

Raw