Rendering Modes

@visulima/tui supports three runtime modes.

React Mode

Use when you want component-driven terminal apps with hooks and Yoga layout.

import { render } from "@visulima/tui/react";

render(<App />);

What you get:

• React components and hooks
• Yoga flex layout
• Focus management (Tab/Shift+Tab)
• Alternate screen lifecycle
• Resize handling (SIGWINCH)

Guide: Quickstart: React Mode

Raw-Buffer Mode

Use when you want direct control over every cell.

import { Renderer, TerminalGuard, terminalSize } from "@visulima/tui/core";

const { cols, rows } = terminalSize();
const guard = new TerminalGuard();
const renderer = new Renderer(cols, rows);
const buf = new Uint32Array(cols * rows * 2);

renderer.render(buf);

What you get:

• Direct Uint32Array painting
• Rust diff engine output
• No React/Yoga overhead
• Alternate screen lifecycle

Guide: Quickstart: Raw-Buffer Mode

Inline Mode

Use when you want a fixed-height region below the current cursor (no alternate screen takeover).

renderInline()

import { renderInline } from "@visulima/tui/react";

renderInline(<Picker />, { rows: 8, onExit: "preserve" });

createInlineLoop()

import { createInlineLoop } from "@visulima/tui/core";

const loop = createInlineLoop(
    (buf, cols, rows, frame) => {
        // paint frame
    },
    { rows: 8, fps: 30, onExit: "preserve" },
);

loop.start();

Notes:

• Inline mode preserves normal scrollback behavior.
• onExit: 'preserve' keeps rendered lines; onExit: 'destroy' clears the region.
• Current implementation exits the process when the inline loop stops.

Guide: Raw Buffer API

Quick Comparison