opentui is the framework used to render the tui, using react.
Sign in to like and favorite skills
opentui is the framework used to render the tui, using react.
IMPORTANT! before starting every task ALWAYS read opentui docs with
curl -s https://raw.githubusercontent.com/sst/opentui/refs/heads/main/packages/react/README.mdALWAYS!
NEVER run bun run index.tsx. You cannot directly run the tui app. it will hang. instead ask me to do so.
use bun add to install packages instead of npm
NEVER pass function or callbacks as dependencies of useEffect, this will very easily cause infinite loops if you forget to use useCallback
NEVER use useCallback. it is useless if we never pass functions in useEffect dependencies
Try to never use useEffect if possible. usually you can move logic directly in event handlers instead
keep types as close as possible to rayacst
DO NOT use as any. instead try to understand how to fix the types in other ways
to implement compound components like
List.ItemDO NOT use console.log. only use logger.log instead
uses onInput not onChange. it is passed a simple string value and not an event object
to render examples components use renderWithProviders not render
ALWAYS bind all class methods to
thisconstructor(options: Options) { // Initialize properties this.prop = options.prop // Bind all methods to this instance this.method1 = this.method1.bind(this) this.method2 = this.method2.bind(this) this.privateMethod = this.privateMethod.bind(this) }
you can use gitchamber.com to read repo files. run
curl https://gitchamber.comfor example when working with the vercel ai sdk, you can fetch the latest docs using:
https://gitchamber.com/repos/repos/vercel/ai/main/files
use gitchamber to read the .md files using curl
you can read more examples of opentui react code using gitchamber by listing and reading files from the correct endpoint: https://gitchamber.com/repos/sst/opentui/main/files?glob=packages/react/examples/**