# anomalyco/opentui architecture

> Architecture diagram of the GitHub repository anomalyco/opentui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/anomalyco/opentui
- Repository: https://github.com/anomalyco/opentui
- Video tour (about a minute): https://gitdiagram.com/anomalyco/opentui/video

## Overview

OpenTUI is a TypeScript terminal-UI framework backed by a Zig/native core, with React and Solid adapters and companion packages for key routing, QR codes, 3D graphics, and SSH-hosted sessions. The main workflow is to compose UI elements, handle terminal input, and render the result to a terminal; framework adapters mount into the core renderer. Package capabilities are taken from the README and tree, while some internal wiring is not shown in the sampled source, so those links are omitted.

Main entry points: [`packages/core/src/renderer.ts`](https://github.com/anomalyco/opentui/blob/main/packages/core/src/renderer.ts) (Terminal renderer), [`packages/solid/index.ts`](https://github.com/anomalyco/opentui/blob/main/packages/solid/index.ts) (Solid adapter), [`packages/core/src/renderables/index.ts`](https://github.com/anomalyco/opentui/blob/main/packages/core/src/renderables/index.ts) (UI renderables), [`packages/qrcode/src/renderables/QRCode.ts`](https://github.com/anomalyco/opentui/blob/main/packages/qrcode/src/renderables/QRCode.ts) (QR renderable)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Core terminal UI"]
  node_coreapi["Core API<br/>[index.ts]"]
  node_elements["UI renderables<br/>[index.ts]"]
  node_renderer["Terminal renderer<br/>[renderer.ts]"]
  node_native["Zig bindings<br/>[zig.ts]"]
  node_platform["Runtime platform<br/>[runtime.ts]"]
end

subgraph group_frameworks["UI frameworks"]
  node_react["React adapter<br/>[renderer.ts]"]
  node_reactapp["React app<br/>[app.tsx]"]
  node_solid["Solid adapter<br/>[index.ts]"]
  node_solidreconciler["Solid reconciler<br/>[reconciler.ts]"]
end

subgraph group_interaction["Input and commands"]
  node_keymap["Keymap runtime<br/>[keymap.ts]"]
  node_keydispatch["Key dispatch<br/>[dispatch.ts]"]
  node_keyhandler["Key events<br/>[KeyHandler.ts]"]
end

subgraph group_extensions["Rendering extensions"]
  node_qrcode["QR renderable<br/>[QRCode.ts]"]
  node_qrencode["QR encoder<br/>[qrcode.ts]"]
  node_three["Three renderer<br/>[WGPURenderer.ts]"]
  node_sprites["Sprite resources"]
end

subgraph group_hosting["Remote sessions"]
  node_sshserver["SSH server<br/>[server.ts]"]
  node_sshconnection["SSH connection<br/>[connection.ts]"]
  node_session["Session runtime<br/>[run-session.ts]"]
end

node_developer(("UI developer"))
node_terminal(("Terminal"))

node_developer -->|"builds with"| node_coreapi
node_developer -->|"composes UI"| node_reactapp
node_developer -->|"composes UI"| node_solid
node_coreapi -->|"provides"| node_elements
node_elements -->|"renders through"| node_renderer
node_renderer -->|"calls bindings"| node_native
node_native -->|"uses runtime"| node_platform
node_renderer -->|"draws to"| node_terminal
node_reactapp -->|"reconciles with"| node_react
node_react -->|"mounts into"| node_renderer
node_solid -->|"mounts through"| node_solidreconciler
node_solid -->|"attaches renderer"| node_renderer
node_keymap -->|"dispatches via"| node_keydispatch
node_keyhandler -.->|"routes events"| node_keydispatch
node_qrcode -->|"encodes data"| node_qrencode
node_qrcode -->|"provides renderable"| node_elements
node_three -->|"manages sprites"| node_sprites
node_three -.->|"integrates with"| node_renderer
node_sshserver -->|"creates handler"| node_sshconnection
node_sshserver -->|"configures sessions"| node_session
node_session -.->|"mounts application"| node_renderer

click node_coreapi "https://github.com/anomalyco/opentui/blob/main/packages/core/src/index.ts"
click node_elements "https://github.com/anomalyco/opentui/blob/main/packages/core/src/renderables/index.ts"
click node_renderer "https://github.com/anomalyco/opentui/blob/main/packages/core/src/renderer.ts"
click node_native "https://github.com/anomalyco/opentui/blob/main/packages/core/src/zig.ts"
click node_platform "https://github.com/anomalyco/opentui/blob/main/packages/core/src/platform/runtime.ts"
click node_react "https://github.com/anomalyco/opentui/blob/main/packages/react/src/reconciler/renderer.ts"
click node_reactapp "https://github.com/anomalyco/opentui/blob/main/packages/react/src/components/app.tsx"
click node_solid "https://github.com/anomalyco/opentui/blob/main/packages/solid/index.ts"
click node_solidreconciler "https://github.com/anomalyco/opentui/blob/main/packages/solid/src/reconciler.ts"
click node_keymap "https://github.com/anomalyco/opentui/blob/main/packages/keymap/src/keymap.ts"
click node_keydispatch "https://github.com/anomalyco/opentui/blob/main/packages/keymap/src/services/dispatch.ts"
click node_keyhandler "https://github.com/anomalyco/opentui/blob/main/packages/core/src/lib/KeyHandler.ts"
click node_qrcode "https://github.com/anomalyco/opentui/blob/main/packages/qrcode/src/renderables/QRCode.ts"
click node_qrencode "https://github.com/anomalyco/opentui/blob/main/packages/qrcode/src/lib/qrcode.ts"
click node_three "https://github.com/anomalyco/opentui/blob/main/packages/three/src/WGPURenderer.ts"
click node_sprites "https://github.com/anomalyco/opentui/blob/main/packages/three/src/SpriteResourceManager.ts"
click node_sshserver "https://github.com/anomalyco/opentui/blob/main/packages/ssh/src/server.ts"
click node_sshconnection "https://github.com/anomalyco/opentui/blob/main/packages/ssh/src/connection.ts"
click node_session "https://github.com/anomalyco/opentui/blob/main/packages/ssh/src/run-session.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_coreapi,node_elements,node_renderer,node_native,node_platform,node_developer toneBlue
class node_react,node_reactapp,node_solid,node_solidreconciler toneAmber
class node_keymap,node_keydispatch,node_keyhandler toneMint
class node_qrcode,node_qrencode,node_three,node_sprites toneRose
class node_sshserver,node_sshconnection,node_session,node_terminal toneIndigo
```

## Components

### Core terminal UI

- [Core API](https://github.com/anomalyco/opentui/blob/main/packages/core/src/index.ts): `packages/core/src/index.ts`
- [UI renderables](https://github.com/anomalyco/opentui/blob/main/packages/core/src/renderables/index.ts): `packages/core/src/renderables/index.ts`
- [Terminal renderer](https://github.com/anomalyco/opentui/blob/main/packages/core/src/renderer.ts): `packages/core/src/renderer.ts`
- [Zig bindings](https://github.com/anomalyco/opentui/blob/main/packages/core/src/zig.ts): `packages/core/src/zig.ts`
- [Runtime platform](https://github.com/anomalyco/opentui/blob/main/packages/core/src/platform/runtime.ts): `packages/core/src/platform/runtime.ts`

### UI frameworks

- [React adapter](https://github.com/anomalyco/opentui/blob/main/packages/react/src/reconciler/renderer.ts): `packages/react/src/reconciler/renderer.ts`
- [React app](https://github.com/anomalyco/opentui/blob/main/packages/react/src/components/app.tsx): `packages/react/src/components/app.tsx`
- [Solid adapter](https://github.com/anomalyco/opentui/blob/main/packages/solid/index.ts): `packages/solid/index.ts`
- [Solid reconciler](https://github.com/anomalyco/opentui/blob/main/packages/solid/src/reconciler.ts): `packages/solid/src/reconciler.ts`

### Input and commands

- [Keymap runtime](https://github.com/anomalyco/opentui/blob/main/packages/keymap/src/keymap.ts): `packages/keymap/src/keymap.ts`
- [Key dispatch](https://github.com/anomalyco/opentui/blob/main/packages/keymap/src/services/dispatch.ts): `packages/keymap/src/services/dispatch.ts`
- [Key events](https://github.com/anomalyco/opentui/blob/main/packages/core/src/lib/KeyHandler.ts): `packages/core/src/lib/KeyHandler.ts`

### Rendering extensions

- [QR renderable](https://github.com/anomalyco/opentui/blob/main/packages/qrcode/src/renderables/QRCode.ts): `packages/qrcode/src/renderables/QRCode.ts`
- [QR encoder](https://github.com/anomalyco/opentui/blob/main/packages/qrcode/src/lib/qrcode.ts): `packages/qrcode/src/lib/qrcode.ts`
- [Three renderer](https://github.com/anomalyco/opentui/blob/main/packages/three/src/WGPURenderer.ts): `packages/three/src/WGPURenderer.ts`
- [Sprite resources](https://github.com/anomalyco/opentui/blob/main/packages/three/src/SpriteResourceManager.ts): `packages/three/src/SpriteResourceManager.ts`

### Remote sessions

- [SSH server](https://github.com/anomalyco/opentui/blob/main/packages/ssh/src/server.ts): `packages/ssh/src/server.ts`
- [SSH connection](https://github.com/anomalyco/opentui/blob/main/packages/ssh/src/connection.ts): `packages/ssh/src/connection.ts`
- [Session runtime](https://github.com/anomalyco/opentui/blob/main/packages/ssh/src/run-session.ts): `packages/ssh/src/run-session.ts`

### Other components

- **UI developer**
- **Terminal**

## Connections

- UI developer → Core API: builds with
- UI developer → React app: composes UI
- UI developer → Solid adapter: composes UI
- Core API → UI renderables: provides
- UI renderables → Terminal renderer: renders through
- Terminal renderer → Zig bindings: calls bindings
- Zig bindings → Runtime platform: uses runtime
- Terminal renderer → Terminal: draws to
- React app → React adapter: reconciles with
- React adapter → Terminal renderer: mounts into
- Solid adapter → Solid reconciler: mounts through
- Solid adapter → Terminal renderer: attaches renderer
- Keymap runtime → Key dispatch: dispatches via
- Key events → Key dispatch: routes events
- QR renderable → QR encoder: encodes data
- QR renderable → UI renderables: provides renderable
- Three renderer → Sprite resources: manages sprites
- Three renderer → Terminal renderer: integrates with
- SSH server → SSH connection: creates handler
- SSH server → Session runtime: configures sessions
- Session runtime → Terminal renderer: mounts application