OpenTUI React cheat sheet

Official resources

Resource	Link
React bindings	OpenTUI docs
Components	OpenTUI docs
OpenTUI agent skill	skills.sh
terminal-control skill	skills.sh

npx skills add anomalyco/opentui --skill opentui
npx skills add anomalyco/terminal-control --skill terminal-control

Create a React app

create-tui

bun create tui -t react my-tui
cd my-tui
bun install
bun dev

import { createCliRenderer } from "@opentui/core";
import { createRoot, useKeyboard, useRenderer } from "@opentui/react";

function App() {
  const renderer = useRenderer();

  useKeyboard((key) => {
    if (key.name === "escape") {
      renderer.destroy();
    }
  });

  return <text>Press Escape to quit.</text>;
}

const renderer = await createCliRenderer();
createRoot(renderer).render(<App />);

TypeScript JSX:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@opentui/react"
  }
}

Test renderer

import { testRender } from "@opentui/react/test-utils";

const app = await testRender(<App />, { width: 80, height: 24 });
await app.renderer.destroy();

Terminal control

repo

termctrl start demo --host opentui --cols 112 --rows 34 -- my-tui
termctrl wait demo "Press Escape"
termctrl show demo
termctrl save demo --format png --out captures/home.png
termctrl stop demo

Community libraries

Resource	What	Link
termcn	Ready-made component registry	Docs · GitHub
tuiparts	OpenTUI primitives and editable recipes	Registry · GitHub
opentui-spinner	Focused spinner package	GitHub
ghostty-opentui	ANSI parser and OpenTUI terminal renderer	GitHub