@opentui/solid

Solid.js support for OpenTUI.

Installation

``bash
bun install solid-js @opentui/solid
`

Usage

1. Add jsx config to tsconfig.json:

`json
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "@opentui/solid"
}
}
`

2. Add preload script to bunfig.toml:

`toml
preload = ["@opentui/solid/preload"]
`

3. Add render function to index.tsx:

`tsx
import { render } from "@opentui/solid"

render(() => Hello, World!)
`

4. Run with bun index.tsx.

5. To build use Bun.build (source):

`ts
import solidPlugin from "@opentui/solid/bun-plugin"

await Bun.build({
entrypoints: ["./index.tsx"],
target: "bun",
outdir: "./build",
plugins: [solidPlugin],
compile: {
target: "bun-darwin-arm64",
outfile: "app-macos",
},
})
`

Table of Contents

- Core Concepts
- Components
- API Reference
- render(node, rendererOrConfig?)
- testRender(node, options?)
- extend(components)
- getComponentCatalogue()
- Hooks
- Portal
- Dynamic
- Components
- Layout & Display
- Input
- Code & Diff
- Text Modifiers

Core Concepts

$3

OpenTUI Solid exposes intrinsic JSX elements that map to OpenTUI renderables:

- Layout & Display: text, box, scrollbox, ascii_font
- Input: input, textarea, select, tab_select
- Code & Diff: code, line_number, diff
- Text Modifiers: span, strong, b, em, i, u, br, a

API Reference

$3

Render a Solid component tree into a CLI renderer. If rendererOrConfig is omitted, a renderer is created with default options.

`tsx
import { render } from "@opentui/solid"

render(() => )
`

Parameters:

- node: Function returning a JSX element.
- rendererOrConfig?: CliRenderer instance or CliRendererConfig.

$3

Create a test renderer for snapshots and interaction tests.

`tsx
import { testRender } from "@opentui/solid"

const testSetup = await testRender(() => , { width: 40, height: 10 })
`

$3

Register custom renderables as JSX intrinsic elements.

`tsx
import { extend } from "@opentui/solid"

extend({ customBox: CustomBoxRenderable })
`

$3

Returns the current component catalogue that powers JSX tag lookup.

$3

- useRenderer()
- onResize(callback)
- useTerminalDimensions()
- useKeyboard(handler, options?)
- usePaste(handler)
- useSelectionHandler(handler)
- useTimeline(options?)

$3

Render children into a different mount node, useful for overlays and tooltips.

`tsx
import { Portal } from "@opentui/solid"
;
Overlay

`

$3

Render arbitrary intrinsic elements or components dynamically.

`tsx
import { Dynamic } from "@opentui/solid"
;
`

Components

$3

- text: styled text container
- box: layout container with borders, padding, and flex settings
- scrollbox: scrollable container
- ascii_font: ASCII art text renderer

$3

- input: single-line text input
- textarea: multi-line text input
- select: list selection
- tab_select: tab-based selection

$3

- code: syntax-highlighted code blocks
- line_number: line-numbered code display with diff/diagnostic helpers
- diff: unified or split diff viewer

$3

These must appear inside a text component:

- span: inline styled text
- strong/b: bold text
- em/i: italic text
- u: underline text
- br: line break
- a: link text with href`