opentui

anomalyco/opentui

Build interactive terminal UIs with a modern framework supporting React, Solid, and native audio.

What is opentui?

OpenTUI is a framework for building terminal user interfaces with core rendering, keyboard input, layout, and component systems. Use it when you need to create interactive CLI applications with rich UI, audio support, and flexible bindings for React or Solid.

Render and manage terminal UI lifecycle with scrollback and frame control
Handle keyboard input, keybindings, and focus management
Layout components using Flexbox/Yoga-based positioning
Play native audio and process PCM/FFT data
Build components with React hooks or Solid signals
Test UIs with snapshot and frame-based test rendering

How to install opentui

npx skills add https://github.com/anomalyco/opentui --skill opentui

Prerequisites

Node.js environment
Familiarity with React or Solid (depending on binding choice)

Claude Code

Cursor

Windsurf

Cline

How to use opentui

1.Start with the getting-started guide at /docs/getting-started
2.Review core concepts: renderer, layout, and keyboard input
3.Choose your binding: React (/docs/bindings/react) or Solid (/docs/bindings/solid)
4.Explore components (text, input) and layout patterns
5.Set up keymaps and keyboard handling via /docs/keymap/overview
6.Add audio support if needed via /docs/core-concepts/audio
7.Implement plugins using /docs/plugins/slots for extensibility
8.Write tests using the test renderer at /docs/core-concepts/testing

Use cases

Good for

Create interactive CLI dashboards with real-time updates
Build terminal-based forms and input-driven applications
Develop music/audio visualizers with native playback and FFT analysis
Implement keyboard-driven navigation and command systems with custom keymaps
Build reusable component libraries for terminal UIs

Who it's for

CLI tool developers
Terminal UI framework users
React or Solid developers building terminal applications
Audio application developers targeting the terminal

opentui FAQ

Which binding should I use, React or Solid?

Choose React if you prefer hooks and a larger ecosystem; choose Solid if you want fine-grained reactivity and smaller bundle size. Both are fully supported with equivalent feature sets.

Can I use OpenTUI without a framework binding?

Yes, the core API supports direct terminal rendering. Use the core renderer directly via /docs/core-concepts/renderer.

How do I add audio playback to my terminal UI?

Refer to /docs/core-concepts/audio for native audio support, PCM playback, and FFT analysis capabilities.

How do I customize keyboard shortcuts?

Use the keymap system documented in /docs/keymap/overview to define custom keybindings and command mappings.

Can I extend OpenTUI with custom functionality?

Yes, the plugin system via /docs/plugins/slots allows you to register custom slots and extensions.

Full instructions (SKILL.md)

Source of truth, from anomalyco/opentui.

name: opentui description: Build terminal UIs with OpenTUI. Covers the core API, native audio, keymaps, React and Solid bindings, components, layout, keyboard input, plugins, and testing.

OpenTUI Skill

Canonical reference docs are authored once in sibling docs/**/*.mdx files.

Inside the OpenTUI repo, this skill root lives at packages/web/src/content/, so the same files are also visible at packages/web/src/content/docs/**/*.mdx.

Path invariant

/docs/<slug> maps to docs/<slug>.mdx relative to this skill root
in the repo, that same slug maps to packages/web/src/content/docs/<slug>.mdx

Reading order by area

Getting started: /docs/getting-started
Core: /docs/core-concepts/renderer
Testing: /docs/core-concepts/testing
Audio: /docs/core-concepts/audio
Keymap: /docs/keymap/overview
React: /docs/bindings/react
Solid: /docs/bindings/solid
Components: /docs/components/text, /docs/components/input
Layout: /docs/core-concepts/layout
Keyboard: /docs/core-concepts/keyboard
Plugins: /docs/plugins/slots
Reference: /docs/reference/env-vars

Quick routing by intent

Intent(s)	Start here
`getting-started`, `installation`, `quickstart`, `intro`	`docs/getting-started.mdx`
`core`, `renderer`, `terminal`, `scrollback`, `lifecycle`	`docs/core-concepts/renderer.mdx`
`audio`, `native-audio`, `sound`, `playback`, `pcm`, `fft`	`docs/core-concepts/audio.mdx`
`keymap`, `keybindings`, `shortcuts`, `commands`, `leader`	`docs/keymap/overview.mdx`
`layout`, `flexbox`, `yoga`, `positioning`	`docs/core-concepts/layout.mdx`
`keyboard`, `input`, `keybindings`, `paste`, `focus`	`docs/core-concepts/keyboard.mdx`
`testing`, `test-renderer`, `snapshots`, `frames`	`docs/core-concepts/testing.mdx`
`react`, `jsx`, `hooks`, `animation`, `testing`	`docs/bindings/react.mdx`
`solid`, `signals`, `jsx`, `hooks`, `animation`, `testing`	`docs/bindings/solid.mdx`
`plugins`, `plugin`, `slots`, `registry`, `extensions`	`docs/plugins/slots.mdx`
`text`, `styling`, `content`, `selection`	`docs/components/text.mdx`
`input`, `form`, `editing`, `focus`	`docs/components/input.mdx`
`env`, `environment`, `configuration`, `flags`	`docs/reference/env-vars.mdx`

For concrete component requests, jump straight to docs/components/<name>.mdx after the relevant entry page. For plugin implementation details, narrow from docs/plugins/slots.mdx into docs/plugins/core.mdx, docs/plugins/react.mdx, or docs/plugins/solid.mdx.

Current skill entry pages

docs/getting-started.mdx
docs/core-concepts/renderer.mdx
docs/core-concepts/audio.mdx
docs/keymap/overview.mdx
docs/core-concepts/layout.mdx
docs/core-concepts/keyboard.mdx
docs/bindings/react.mdx
docs/bindings/solid.mdx
docs/plugins/slots.mdx
docs/components/text.mdx
docs/components/input.mdx
docs/reference/env-vars.mdx

Working rules

Prefer the current entry pages first, then read narrower docs in the same section.
Read the sibling docs/**/*.mdx files directly instead of copying prose into this file.
Use stable /docs/... URLs when cross-referencing docs.

Related skills

More from anomalyco/opentui and the wider catalog.

recharts

ansanabria/skills

Build composable, responsive React charts with Recharts library. Use when creating data visualizations including line charts, area charts, bar charts, pie charts, scatter plots, and composed charts. Handles chart customization, responsive sizing, tooltips, legends, axes configuration, performance optimization, and accessibility.

768 installsAudited