Terminal UIs in TypeScript

Build rich, interactive terminal interfaces with flexbox layouts and first-class TypeScript support.

12345678910 
import { createCliRenderer, Text } from "@opentui/core"

const renderer = await createCliRenderer()

renderer.root.add(
  Text({
    content: "Hello, OpenTUI!",
    fg: "#00FF00",
  })
)
1234567891011 
import { createCliRenderer, Input } from "@opentui/core"

const renderer = await createCliRenderer()

const input = Input({
  placeholder: "Type something...",
  width: 30,
})

input.focus()
renderer.root.add(input)
1234567891011121314 
import { createCliRenderer, Box, Text } from "@opentui/core"

const renderer = await createCliRenderer()

renderer.root.add(
  Box(
    { width: "100%", height: "100%", flexDirection: "row", gap: 2 },
    Box(
      { flexGrow: 1, backgroundColor: "#1a1b26" },
      Text({ content: "Sidebar", fg: "#bb9af7" })
    ),
    Box({ flexGrow: 3, backgroundColor: "#24283b" }, Text({ content: "Main" }))
  )
)

What is OpenTUI?

OpenTUI is a TypeScript library for building rich, interactive terminal user interfaces.

  • [o]
    Flexbox layout Yoga-powered layout engine with familiar CSS-like positioning and sizing
  • [*]
    Syntax highlighting Built-in tree-sitter integration for beautiful code rendering
  • [*]
    Rich components Text, Box, Input, Select, ScrollBox, Code, Diff, and more
  • [*]
    Keyboard handling Focus management and input handling built in
  • [*]
    React and Solid.js First-class bindings for building UIs with your favorite framework
  • [*]
    Animations Timeline API for smooth, performant terminal animations
Read docs
© 2026 Anomaly