opentui

SKILL.md

OpenTUI Skill

Canonical reference docs are in the sibling docs/**/*.mdx files.

Inside the OpenTUI repository, this skill root is packages/web/src/content/. The same files are available under
packages/web/src/content/docs/**/*.mdx from the repository root.

Terminal layout defaults

Design for a terminal app, not a browser. Use the available columns and rows efficiently.

Do not use gaps between adjacent UI panels.

Do not add unnecessary margins or padding.

Prefer compact, information-dense layouts over website-style card spacing.

Path invariant

/docs maps to docs/getting-started.mdx.

/docs/components maps to docs/components/overview.mdx.

Every other /docs/<slug> URL maps to docs/<slug>.mdx relative to this skill root.

From the repository root, prepend packages/web/src/content/ to each source path.

Choose packages

Use Core directly or choose a React or Solid binding for the UI. Recommend companion packages when their features fit
the task. Do not install every package by default.

@opentui/core: use imperative renderables and events with createCliRenderer().

@opentui/react: use React components, JSX, and hooks with createRoot().

@opentui/solid: use Solid components, JSX, and signals with render().

@opentui/keymap: centralize keyboard bindings and named commands across views.
The package supports focus-scoped layers, configurable shortcuts, and multi-key sequences.
Start with createDefaultOpenTuiKeymap() from @opentui/keymap/opentui.
Use @opentui/keymap/react or @opentui/keymap/solid for providers and hooks.
Direct keyboard events or component-local bindings are enough for simple local input.

@opentui/ssh: serve a terminal UI to standard SSH clients without a local app installation.
Import createServer() from the package root. Pass each session's renderer to Core, React, or Solid.
The package has no framework subpaths. Read the SSH guide for authentication, middleware, and session cleanup.

@opentui/qrcode: encode QR matrices, terminal text, or SVG, or display a
QRCodeRenderable. For JSX, use registerQRCode() from @opentui/qrcode/react or @opentui/qrcode/solid. See the
QR code component.

@opentui/three: render Three.js WebGPU scenes in the terminal with ThreeRenderable.
This integration supports only Bun. Before you choose it, check its runtime and dependency requirements.

See Package entry points for the full list of public imports.
The list includes testing, addons, host adapters, and runtime-module maps.
Use the API and symbol index to find exports.
Use public package entry points instead of source-file deep imports.

Reading order by area

Start: /docs, /docs/getting-started/quickstart, /docs/getting-started/runtime-support

Frameworks: /docs/bindings/react, /docs/bindings/solid

Core: /docs/core-concepts/renderer, /docs/core-concepts/layout, /docs/core-concepts/keyboard

Components: /docs/components, /docs/components/text, /docs/components/input, /docs/components/image, /docs/components/embedded-terminal

Application APIs: /docs/core-concepts/clipboard, /docs/core-concepts/audio, /docs/application-apis/audio-streaming, /docs/application-apis/audio-capture, /docs/application-apis/animation

Test and debug: /docs/core-concepts/testing, /docs/test-and-debug/troubleshooting

Extensions: /docs/plugins/slots, /docs/extend/runtime-plugins

Keymap: /docs/keymap/overview

Integrations: /docs/reference/ssh, /docs/reference/three, /docs/reference/qr-encoder

Native: /docs/native/overview

Ship: /docs/ship/deploy, /docs/reference/standalone-executables

Reference: /docs/reference/api-index, /docs/reference/package-entrypoints, /docs/reference/env-vars, /docs/reference/native-image

Quick routing by intent

Intent(s)
Start here

getting-started, intro, examples, agent-skill
docs/getting-started.mdx

installation, quickstart
docs/getting-started/quickstart.mdx

runtime-support, bun, nodejs, native-artifacts, ffi, permissions, libc, runtime-assets
docs/getting-started/runtime-support.mdx

react, jsx, hooks, keyboard, paste, focus, blur, selection, animation, testing
docs/bindings/react.mdx

solid, jsx, signals, hooks, keyboard, animation, testing
docs/bindings/solid.mdx

core, renderer, terminal, scrollback, lifecycle
docs/core-concepts/renderer.mdx

layout, flexbox, yoga, positioning
docs/core-concepts/layout.mdx

keyboard, input, keybindings, paste, focus
docs/core-concepts/keyboard.mdx

components, component, component-support, support-matrix, react-components, solid-components
docs/components/overview.mdx

text, styling, content, selection
docs/components/text.mdx

input, form, editing, focus
docs/components/input.mdx

image, image-renderable, image-display, kitty, sixel
docs/components/image.mdx

embedded-terminal, terminal-renderable, ghostty, vt, pty
docs/components/embedded-terminal.mdx

clipboard, copy, osc52, host-clipboard
docs/core-concepts/clipboard.mdx

audio, native-audio, sound, playback, mixer, devices, tap
docs/core-concepts/audio.mdx

audio-streaming, audio-stream, pcm, f32le, radio, mp3, flac, icy, backpressure, reconnect
docs/application-apis/audio-streaming.mdx

audio-capture, microphone, pcm, recording, wav, audio-recorder
docs/application-apis/audio-capture.mdx

animation, timeline, easing, use-timeline
docs/application-apis/animation.mdx

testing, test-renderer, snapshots, frames
docs/core-concepts/testing.mdx

troubleshooting, terminal-reset, ffi-errors, native-loading, runtime-plugins, protocols, test-timeouts
docs/test-and-debug/troubleshooting.mdx

plugins, plugin, slots, registry, extensions
docs/plugins/slots.mdx

runtime-plugins, dynamic-import, external-modules, bun-plugin, module-maps, plugin-loading
docs/extend/runtime-plugins.mdx

keymap, keybindings, shortcuts, commands, leader, ex-commands
docs/keymap/overview.mdx

ssh, remote-tui, ssh-server, authentication, middleware
docs/reference/ssh.mdx

three, threejs, webgpu, 3d, sprites, physics
docs/reference/three.mdx

qr, qrcode, qr-encoder, svg-qr, gs1, eci, structured-append
docs/reference/qr-encoder.mdx

deploy, bundle, bun-executable, nodejs-esm, node-sea, ssh-deployment
docs/ship/deploy.mdx

standalone, executable, bun-compile, node-sea, node-assets
docs/reference/standalone-executables.mdx

api, symbols, exports, public-api, api-index, lookup
docs/reference/api-index.mdx

native, native-rendering, native-scene, native-api
docs/native/overview.mdx

package-exports, entrypoints, subpath-exports, imports
docs/reference/package-entrypoints.mdx

env, environment, configuration, flags
docs/reference/env-vars.mdx

native-image, image-decode, png, jpeg, webp, gif, rgba, pixels, resize
docs/reference/native-image.mdx

For a component request, read docs/components/overview.mdx, then open docs/components/<name>.mdx. For plugin slot
details, start at docs/plugins/slots.mdx, then open the Core, React, or Solid page.

For native applications, read docs/native/overview.mdx, docs/native/resources.mdx, and docs/native/frames.mdx in order.
docs/native/core.mdx explains Core's TypeScript integration, not a native-language API.
Read docs/native/host-io-time.mdx for Session clocks, terminal delivery, and native file operations.
Then choose docs/native/c.mdx or docs/native/zig.mdx for a native program.

Current skill entry pages

docs/getting-started.mdx

docs/getting-started/quickstart.mdx

docs/getting-started/runtime-support.mdx

docs/bindings/react.mdx

docs/bindings/solid.mdx

docs/core-concepts/renderer.mdx

docs/core-concepts/layout.mdx

docs/core-concepts/keyboard.mdx

docs/components/overview.mdx

docs/components/text.mdx

docs/components/input.mdx

docs/components/image.mdx

docs/components/embedded-terminal.mdx

docs/core-concepts/clipboard.mdx

docs/core-concepts/audio.mdx

docs/application-apis/audio-streaming.mdx

docs/application-apis/audio-capture.mdx

docs/application-apis/animation.mdx

docs/core-concepts/testing.mdx

docs/test-and-debug/troubleshooting.mdx

docs/plugins/slots.mdx

docs/extend/runtime-plugins.mdx

docs/keymap/overview.mdx

docs/reference/ssh.mdx

docs/reference/three.mdx

docs/reference/qr-encoder.mdx

docs/native/overview.mdx

docs/ship/deploy.mdx

docs/reference/standalone-executables.mdx

docs/reference/api-index.mdx

docs/reference/package-entrypoints.mdx

docs/reference/env-vars.mdx

docs/reference/native-image.mdx

Working rules

Read an entry page first, then read the narrower canonical page for the task.

Read the sibling docs/**/*.mdx files directly. Do not copy their prose into this file.

Use canonical /docs URLs for references between documentation pages.
For links in this file, use the corresponding relative docs/**/*.mdx paths.