---

title: Text description: Display styled text content skill: entry: true intents: [text, styling, content, selection]

Text

Text displays styled text with colors, attributes, and selection. Use it for labels and prose. Use Code or Markdown for parsed rich content.

Availability

Basic usage

Renderable API

import { TextRenderable, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

const text = new TextRenderable(renderer, {
  id: "greeting",
  content: "Hello, OpenTUI!",
  fg: "#00FF00",
})

renderer.root.add(text)

Text attributes

Combine multiple text attributes using bitwise OR:

import { TextRenderable, TextAttributes } from "@opentui/core"

const styledText = new TextRenderable(renderer, {
  id: "styled",
  content: "Important Message",
  fg: "#FFFF00",
  attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
})

Bold, italic, and underline can also be applied independently:

bold       Important message
italic     Additional context
underline  Documentation

Available attributes

Template literals for rich text

Use the t template literal for inline styling within a single text element:

import { TextRenderable, t, bold, underline, fg, bg, italic } from "@opentui/core"

const richText = new TextRenderable(renderer, {
  id: "rich",
  content: t`${bold("Important:")} ${fg("#FF0000")(underline("Warning!"))} Normal text`,
})

Available style functions

import { t, bold, dim, italic, underline, blink, reverse, strikethrough, fg, bg } from "@opentui/core"

// Basic attributes
t`${bold("bold text")}`
t`${italic("italic text")}`
t`${underline("underlined")}`
t`${strikethrough("deleted")}`

// Colors
t`${fg("#FF0000")("red text")}`
t`${bg("#0000FF")("blue background")}`

// Combining styles
t`${bold(fg("#FFFF00")("bold yellow"))}`

React and Solid can compose inline <span>, <b>, <strong>, <i>, <em>, <u>, <br>, and <a href> elements inside <text>. They are text-only children and cannot mount under a Box or another layout element directly. See inline text elements for availability.

Positioning

const text = new TextRenderable(renderer, {
  id: "positioned",
  content: "Absolute position",
  position: "absolute",
  left: 10,
  top: 5,
})

Text selection

Enable text selection for copying:

const selectableText = new TextRenderable(renderer, {
  id: "selectable",
  content: "Select me!",
  selectable: true, // Default is true
})

const nonSelectable = new TextRenderable(renderer, {
  id: "label",
  content: "Button Label",
  selectable: false, // Disable selection
})

Properties

Example: status bar

import { TextRenderable, BoxRenderable, t, bold, fg } from "@opentui/core"

const statusBar = new BoxRenderable(renderer, {
  position: "absolute",
  bottom: 0,
  width: "100%",
  height: 1,
  backgroundColor: "#333333",
  flexDirection: "row",
  justifyContent: "space-between",
  paddingLeft: 1,
  paddingRight: 1,
})
statusBar.add(
  new TextRenderable(renderer, {
    content: t`${bold("myfile.ts")} - ${fg("#888888")("TypeScript")}`,
  }),
)
statusBar.add(
  new TextRenderable(renderer, {
    content: t`Ln ${fg("#00FF00")("42")}, Col ${fg("#00FF00")("15")}`,
  }),
)

renderer.root.add(statusBar)

Related concepts

Read Text and terminal cells for graphemes, wrapping, and display-cell widths. See Colors, Layout, and Interaction, focus, and selection for shared behavior. Use Box to lay out text with other components.