.agents/skills/opentui/references/core/REFERENCE.md
The foundational library for building terminal user interfaces. Provides an imperative API with all primitives, giving you maximum control over rendering, state, and behavior.
OpenTUI Core runs on Bun with native Zig bindings for performance-critical operations:
Use the core imperative API when:
| Scenario | Use Instead |
|---|---|
| Familiar with React patterns | @opentui/react |
| Want fine-grained reactivity | @opentui/solid |
| Building typical applications | React or Solid reconciler |
| Rapid prototyping | React or Solid reconciler |
bunx create-tui@latest -t core my-app
cd my-app
bun run src/index.ts
The CLI creates the my-app directory for you - it must not already exist.
Agent guidance: Always use autonomous mode with -t <template> flag. Never use interactive mode (bunx create-tui@latest my-app without -t) as it requires user prompts that agents cannot respond to.
mkdir my-tui && cd my-tui
bun init
bun install @opentui/core
import { createCliRenderer, TextRenderable, BoxRenderable } from "@opentui/core"
const renderer = await createCliRenderer()
// Create a box container
const container = new BoxRenderable(renderer, {
id: "container",
width: 40,
height: 10,
border: true,
borderStyle: "rounded",
padding: 1,
})
// Create text inside the box
const greeting = new TextRenderable(renderer, {
id: "greeting",
content: "Hello, OpenTUI!",
fg: "#00FF00",
})
// Compose the tree
container.add(greeting)
renderer.root.add(container)
The CliRenderer orchestrates everything:
| Renderables (Imperative) | Constructs (Declarative) |
|---|---|
new TextRenderable(renderer, {...}) | Text({...}) |
| Requires renderer at creation | Creates VNode, instantiated later |
| Direct mutation via methods | Chained calls recorded, replayed on instantiation |
| Full control | Cleaner composition |
Renderables can be composed in two ways:
.add() to composebun install @opentui/core # Install
bun run src/index.ts # Run directly (no build needed)
bun test # Run tests
OpenTUI runs on Bun and uses Zig for native builds.
# Package management
bun install @opentui/core
# Running
bun run src/index.ts
bun test
# Building (only needed for native code changes)
bun run build
Zig is required for building native components.