Ink Compatibility

Ink API parity matrix, render option differences, and Ratatat-only exports in @visulima/tui/react

Ink Compatibility

@visulima/tui targets Ink API compatibility for core component and hook workflows, with a few documented stubs and behavior differences.

Core API Parity

ExportStatusNotes
render()Returns { rerender, unmount, waitUntilExit, app, input }
BoxYoga-backed layout
TextCore style props supported
Newlinecount supported
SpacerFlex grow spacer
StaticAppend-only semantics
TransformTransform callback support
renderToString()Synchronous snapshot
measureElement()Returns { width, height }
useApp()exit + quit
useInput()Arrows, Enter, Escape, Ctrl, Meta, paging keys
usePaste()Bracketed paste routing
useFocus()Focus state and focus(id)
useFocusManager()Focus navigation methods
useStdin()Raw mode helpers
useStdout()Buffered while app is running
useStderr()Buffered while app is running
useBoxMetrics()Layout metrics + hasMeasured (intended for render() mode)
useWindowSize(){ columns, rows } (intended for render() mode)
CursorDeclarative cursor; inline mode + anchor mode
useCursor()Imperative cursor positioning with IME support
useIsScreenReaderEnabled()⚠️Stub: always false

Render Option Differences

render() accepts Ink-style options, but these are currently ignored:

  • concurrent
  • patchConsole
  • exitOnCtrlC
  • incrementalRendering
  • debug

maxFps is used.

Ratatat-only API (No Ink Equivalent)

ExportDescription
useScrollable()Virtual scrolling state helper
useMouse()Mouse click/wheel events with modifiers
useTextInput()Managed text editing hook
SpinnerAnimated spinner component
ProgressBarProgress bar component
renderInline()React inline rendering mode
createInlineLoop()Raw-buffer inline rendering loop
Renderer / TerminalGuardRaw-buffer runtime primitives

Architectural Differences vs Ink

ConcernInk@visulima/tui
Render strategyJS string rendererRust diff over Uint32Array
Screen modeInline rewrite modelAlternate screen model
patchConsoleIntegratedNot implemented
Screen reader hookFunctionalStub (false)
Cursor hookFunctionalFunctional

compat-test/ Status

The compat-test/ directory tracks runnable Ink example ports.

  • Most files are direct ports with import-path changes
  • Two files include small TypeScript typing fixes from upstream examples (use-focus.tsx, use-focus-with-id.tsx)

Run examples manually:

node --import @oxc-node/core/register compat-test/counter.tsx
node --import @oxc-node/core/register compat-test/chat.tsx
Support

Contribute to our work and keep us going

Community is the heart of open source. The success of our packages wouldn't be possible without the incredible contributions of users, testers, and developers who collaborate with us every day.Want to get involved? Here are some tips on how you can make a meaningful impact on our open source projects.

Ready to help us out?

Be sure to check out the package's contribution guidelines first. They'll walk you through the process on how to properly submit an issue or pull request to our repositories.

Submit a pull request

Found something to improve? Fork the repo, make your changes, and open a PR. We review every contribution and provide feedback to help you get merged.

Good first issues

Simple issues suited for people new to open source development, and often a good place to start working on a package.
View good first issues