bun add @opentui/core

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

const renderer = await createCliRenderer({
  exitOnCtrlC: true,
  targetFps: 30,
})

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

renderer.start()

const box = new BoxRenderable(renderer, { id: "panel", width: 30, height: 10 })
renderer.root.add(box)
box.backgroundColor = "#444477"  // Mutate directly

import { Text, Box, Input, delegate } from "@opentui/core"

function LabeledInput(props: { id: string; label: string }) {
  return delegate(
    { focus: `${props.id}-input` },
    Box(
      { flexDirection: "row" },
      Text({ content: props.label }),
      Input({ id: `${props.id}-input`, width: 20 })
    )
  )
}

renderer.root.add(Box({ padding: 1 }, LabeledInput({ id: "name", label: "Name: " })))

{
  flexDirection: "row" | "column",
  justifyContent: "flex-start" | "center" | "flex-end" | "space-between",
  alignItems: "flex-start" | "center" | "flex-end" | "stretch",
  width: 30 | "100%" | "auto",
  height: 10,
  padding: 1,
  margin: 1,
  position: "relative" | "absolute",
  zIndex: 100,
}

// Keyboard
renderer.keyInput.on("keypress", (key) => {
  if (key.name === "escape") modal.visible = false
  if (key.ctrl && key.name === "q") renderer.exit()
})

// Focus
input.focus()
input.blur()
input.on(RenderableEvents.FOCUSED, () => {})

bun add @opentui/react   # React reconciler
bun add @opentui/solid   # SolidJS reconciler