Start

Install

Install the tooee command or add Tooee packages to a Bun project.

Tooee runs on Bun. Install Bun first.

Install the CLI

bun add --global @tooee/cli
tooee --help

tooee --help prints the commands and options. The CLI installs OpenTUI and React with it, so it needs no other packages. To run a command without a global install, use bunx:

bunx @tooee/cli view README.md

Add packages to a Bun project

bun add @tooee/view @tooee/ask @tooee/choose

Each package lists @opentui/core, @opentui/react, and react as peer dependencies. Bun installs missing peers for you. When your project pins OpenTUI or React, keep the pin inside the peer range that the Tooee packages declare.

Custom apps use more packages: @tooee/shell, @tooee/commands, @tooee/layout, @tooee/overlays, @tooee/panels, @tooee/router, @tooee/themes, and @tooee/config. See the guides and the Package Reference.

Set the JSX options

Tooee components are OpenTUI JSX. Point TypeScript at the OpenTUI runtime in tsconfig.json:

tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noEmit": true,
    "skipLibCheck": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@opentui/react",
    "types": ["bun"]
  },
  "include": ["*.ts", "*.tsx"]
}

jsx and jsxImportSource make <box> and <text> typecheck. types: ["bun"] needs the Bun type package:

bun add -d @types/bun typescript

A script that only calls launch() typechecks without the two jsx options. Add them before you write a component.

Check the install

view-readme.ts
import { createFileProvider, launch } from "@tooee/view";

await launch({ contentProvider: createFileProvider("README.md") });
bun view-readme.ts

View opens README.md. Press q to quit.

Next

On this page