Getting Started
Install @visulima/tui and choose the right rendering mode for your project
Getting Started
@visulima/tui supports three runtime modes.
| Mode | Primary API | Import path | Best for |
|---|---|---|---|
| React mode | render(<App />) | @visulima/tui/react | Component-driven TUIs with hooks and Yoga layout |
| Raw-buffer mode | Renderer + renderer.render | @visulima/tui/core | Direct per-cell rendering and custom loops |
| Inline mode | renderInline / createInlineLoop | @visulima/tui/react / @visulima/tui/core | Fixed-height UI below the cursor |
Install
React apps (most users)
npm install @visulima/tui reactRaw-buffer / non-React apps
npm install @visulima/tui
@visulima/tui/coreis a TypeScript-facing runtime with a native Rust diff/render engine. React is an optional peer dependency.
Requirements
- Node.js: 20.19 or higher
Run examples in this repository
# React mode
node --import @oxc-node/core/register examples/kitchen-sink.tsx
node --import @oxc-node/core/register examples/counter.tsx
# Raw-buffer mode
node --import @oxc-node/core/register examples-raw/matrix.ts
node --import @oxc-node/core/register examples-raw/conway.ts
# Inline mode (React)
node --import @oxc-node/core/register examples/inline-minimal.tsxSee Examples for the full list.
Ink migration (typical)
- import { render, Box, Text } from 'ink'
+ import { render, Box, Text } from '@visulima/tui/react'Most app-level API usage maps directly. See Ink Compatibility for caveats and stubs.