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
Text content to display. Can be a plain string or a StyledText object with inline styling.
Foreground color for the text (e.g., "#FF0000" or "red").
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
Enable text selection with mouse or keyboard.
Background color for selected text.
Foreground color for selected text.
Enable middle truncation with ellipsis when text exceeds available width.
Width of the text container. Accepts numbers (pixels) or strings like "100%" or "50%".
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.
clear()
Clear all content.
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
- TextNode - Rich text composition with nested styling
- Code - Syntax-highlighted code display
- Markdown - Markdown rendering