Text

Display plain or styled text content with text wrapping, selection, and text node composition

Overview

The TextRenderable component displays text content in your terminal UI. It supports styled text with colors and attributes, text wrapping modes, text selection, and dynamic composition using TextNodes.

Basic Usage

import { TextRenderable } from "@opentui/core"

const text = new TextRenderable(renderer, {
  content: "Hello, World!",
  fg: "#E6EDF3",
  width: "100%",
})

Props

content · string | StyledText

Text content to display. Can be a plain string or a StyledText object with inline styling.

fg · string | RGBA

Foreground color for the text (e.g., "#FF0000" or "red").

bg · string | RGBA

Background color for the text.

wrapMode · 'none' | 'char' | 'word' · default: "'none'"

Text wrapping behavior:

• 'none': No wrapping, text extends beyond bounds
• 'char': Wrap at any character
• 'word': Wrap at word boundaries

selectable · boolean · default: "false"

Enable text selection with mouse or keyboard.

selectionBg · string | RGBA

Background color for selected text.

selectionFg · string | RGBA

Foreground color for selected text.

truncate · boolean · default: "false"

Enable middle truncation with ellipsis when text exceeds available width.

width · number | string

Width of the text container. Accepts numbers (pixels) or strings like "100%" or "50%".

height · number | string

Height of the text container.

Methods

add()

Add a TextNode or string to the text content.

const boldNode = TextNodeRenderable.fromString("Bold text", {
  attributes: 1, // bold
})
text.add(boldNode)

remove()

Remove a TextNode by ID.

text.remove(node.id)

clear()

Clear all content.

text.clear()

Examples

Styled Text

import { stringToStyledText } from "@opentui/core"

const styledContent = stringToStyledText("Styled text")
const text = new TextRenderable(renderer, {
  content: styledContent,
  width: "100%",
})

Word Wrapping

const text = new TextRenderable(renderer, {
  content: "This is a long text that will wrap at word boundaries when it exceeds the available width.",
  wrapMode: "word",
  width: 40,
})

Selectable Text

const text = new TextRenderable(renderer, {
  content: "You can select this text with your mouse or keyboard",
  selectable: true,
  selectionBg: "#264F78",
  selectionFg: "#FFFFFF",
  width: "100%",
})

Dynamic Composition with TextNodes

import { TextNodeRenderable, bold, green, yellow, cyan } from "@opentui/core"

const text = new TextRenderable(renderer, {
  width: 60,
})

// Add dynamically styled content
text.add(TextNodeRenderable.fromString("Status: ", { fg: "#888888" }))
text.add(TextNodeRenderable.fromString("Active", { fg: "#22c55e", attributes: 1 }))

Using Helper Functions

import { t, bold, underline, green, yellow, cyan } from "@opentui/core"

const text = new TextRenderable(renderer, {
  content: t`${bold(cyan("TextNode Demo"))}
${yellow("•")} Press ${green("1-4")} to see different examples
${yellow("•")} Press ${green("ESC")} to exit

${underline("Current:")} Example 1 - Basic TextNode Creation`,
})

Properties

content

Get or set the text content.

text.content = "New content"
console.log(text.content) // StyledText object

chunks

Access the underlying styled text chunks.

const chunks = text.chunks // TextChunk[]

textNode

Access the root TextNode for advanced composition.

const rootNode = text.textNode // RootTextNodeRenderable

Related Components

• TextNode - Rich text composition with nested styling
• Code - Syntax-highlighted code display
• Markdown - Markdown rendering