Skip to main content

​
Overview

The Text widget displays text content with support for multiple formats including plain text, Markdown rendering, and syntax-highlighted code.

​
Constructor

const text = new Text(options?: TextOptions);

​
TextOptions

​
content
string
The text content to display. Can be updated later using setContent().
​
format
'plain' | 'markdown' | 'code'
Content format:
  • "plain" - Plain text (default)
  • "markdown" - Render as Markdown with formatting
  • "code" - Syntax-highlighted code (requires language)
​
language
string
Programming language for syntax highlighting when format is "code".Examples: "javascript", "rust", "python", "json", etc.
​
fg
string | number
Foreground (text) color. Accepts:
  • Hex string: "#FF0000"
  • Color name: "red", "blue", etc.
  • 256-color code: 196
​
bg
string | number
Background color. Same format as fg.
​
bold
boolean
Enable bold text styling.
​
italic
boolean
Enable italic text styling.
​
underline
boolean
Enable underline text styling.

​
Methods

​
setContent()

Update the text content. 
setContent(text: string): void
​
text
string
The new text content to display.
Source: ts/src/widgets/text.ts:43

​
getContent()

Retrieve the current text content. 
getContent(): string
​
return
string
The current text content.
Source: ts/src/widgets/text.ts:49

​
setCodeLanguage()

Set the programming language for syntax highlighting (only applies when format is "code"). 
setCodeLanguage(language: string): void
​
language
string
Programming language identifier (e.g., "rust", "javascript").
Source: ts/src/widgets/text.ts:60

​
Examples

import { Text } from "kraken-tui";

const text = new Text({
  content: "Hello, World!",
  fg: "green",
  bold: true,
});

// Update content dynamically
text.setContent("Updated text");

​
Inherited Methods

Text inherits all methods from the Widget base class, including:
  • setVisible(visible) - Control visibility
  • setWidth(width) - Set width constraint
  • setHeight(height) - Set height constraint
  • destroy() - Clean up resources
  • animate(options) - Animate properties
See the Widget API reference for the complete list.

​
Notes

  • Text widgets are leaf nodes and cannot have children
  • Markdown rendering supports common formatting (headings, bold, italic, lists, etc.)
  • Syntax highlighting uses the same engine as popular code editors
  • Content can be updated dynamically using setContent() without recreating the widget
  • Text styling properties (bold, italic, underline) can be combined

Build docs developers (and LLMs) love

Get started for freeTalk to us