Silvery — React for modern terminal apps

Powerful apps. Polished UIs. Proudly terminal.

$ npm install silvery react

import { useState } from "react"
import { render, Box, Text, useInput, createTerm } from "silvery"

function Counter() {
  const [count, setCount] = useState(0)
  useInput((input) => {
    if (input === "j") setCount((c) => c + 1)
  })
  return (
    <Box borderStyle="round" padding={1}>
      <Text>Count: {count}</Text>
    </Box>
  )
}

using term = createTerm()
term.modes.altScreen(true)
term.modes.rawMode(true)
await render(<Counter />, term).run()

React 18 + 19 with concurrent mode, Suspense, and flexbox layout. Drop-in Ink compatible (@silvery/ink) — same Box, Text, useInput API with 918/931 Ink 7.0 tests passing.

Shiny new stuff

• Best-in-class performance — 3–27× faster (typically 15–20×) and 10–20× less terminal output vs Ink 7.0 with its new incremental rendering, in mounted rerender benchmarks. Cell-level dirty tracking, only changed cells emit. Per-node skip for unchanged subtrees. Works in inline mode with native scrollback, not just fullscreen.
• Pure TypeScript, zero native deps — no WASM, no build steps. Layout via Flexily (or Yoga). Works on Alpine, CI, Docker, everywhere.
• Web-like responsive layout — useBoxRect() returns actual dimensions during render. No post-render measurement, no two-pass layout cycle. Enables:
  • Scroll containers — overflow="scroll" with virtualization
  • Sticky positioning — position="sticky" for headers and footers
  • ANSI-aware compositing — color blending with alpha across overlapping layers
• Inline, fullscreen, or both — same components, one-line switch. All with incremental rendering:
  • Fullscreen — alt screen, traditional TUI
  • Inline with dynamic scrollback — live React zone at bottom, completed items graduate to terminal-owned scrollback. Native Cmd+F and text selection
  • Virtual inline — alt screen + app-managed scrollback history, scrollable and searchable
• Web-like interaction — full keyboard and mouse events that just work. Modifier keys, mouse buttons, and drag all combine seamlessly into a single event model. Enables:
  • Focus scopes — spatial arrow-key nav, Tab/Escape, click-to-focus
  • Text selection — mouse drag, word/line, userSelect boundaries, Alt+drag override
  • Find — Ctrl+F with match highlighting and n/N navigation
  • Copy-mode — Esc, v for vim-style keyboard selection and yanking
  • Drag-and-drop — mouse drag with hit testing
• Rich component library — 45+ components: TextInput, SelectList, ListView, Table, TreeView, Tabs, CommandPalette, ModalDialog, Toast, and more. Every component automatically participates in focus, mouse, and keybindings (readline, vim) — no wiring needed. 84 theme palettes with semantic tokens ($primary, $error) and auto-detected terminal colors.
• Playwright-style testing — 3,000+ tests. Full access to terminal internals (scrollback buffer, cursor position, cell styles, window dimensions):
  • createRenderer — fast unit tests with auto-refreshing CSS locators, cell-level color assertions, frame-by-frame inspection
  • Termless — like Playwright for terminals. Full ANSI fidelity with 12 swappable backends (xterm.js, Ghostty, Alacritty, WezTerm, Kitty, and more)
  • SILVERY_STRICT — multi-level verification: buffer (incremental vs fresh), ANSI (internal parser), terminal (cross-backend), and accumulated replay
• Composable architecture — every layer is independently swappable. DI via pipe() providers:
  • Layout — Flexily or Yoga
  • State — BYO (useState, Zustand, Jotai, Redux)
  • Term — real, headless, emulator
  • App — from stringify to rich app (withFocus, withDomEvents, withCommands). Render to terminal, Canvas, or DOM
• All modern terminal protocols — 60 years of terminal protocols, unified into clean APIs. 100+ escape sequences you'll never have to write — auto-negotiated and gracefully degraded: Kitty keyboard + SGR mouse become rich events with modifiers; hyperlinks are just props; clipboard is a function call. Truecolor, underline styles, synchronized output, bracketed paste, focus reporting, resize detection, inline images, and more.

Why Silvery?

Silvery grew out of building a complex terminal app — a multi-pane workspace with thousands of nodes. Components needed to know their size during render. Updates needed to be fast. Scroll containers, mouse events, focus scopes, and Playwright-style testing needed to just work. What started as a renderer grew into a layout engine, then 45+ components, theming, testing infrastructure, and eventually a framework.

Along the way, three principles emerged. Take the best from the web, stay true to the terminal, and raise the bar for developer ergonomics, architecture composability, and performance.

The Silvery Way · Silvery vs Ink · About

Next steps

• Quick start — install, first app, deploy
• Interactive examples — npx @silvery/examples to try them locally
• Silvery vs Ink — feature comparison and migration guide

Install from npm; a git install resolves the TypeScript source and runs only under Bun.

Packages

Package	Description
silvery	Components, hooks, renderer — the one package you need
@silvery/ink / @silvery/chalk	Ink compatibility — 918/931 Ink 7.0 tests, 32/32 Chalk tests
@silvery/test	Playwright-style testing — locators, press(), buffer assertions
@silvery/create	Composable app builder — pipe() providers (coming soon)
@silvery/theme	84 color schemes, semantic tokens, auto-detect
@silvery/commander	Beautiful CLIs for free — help renders through Silvery itself
@silvery/headless	Pure state machines — portable, no React
@silvery/ansi	Terminal primitives — styling, SGR, detection

Ecosystem

Standalone projects Silvery builds on — each stands on its own:

Project	What
Flexily	Pure JS flexbox layout engine (Yoga-compatible, 1.5-5.5× faster, zero WASM)
Termless	Headless terminal testing — like Playwright for terminal apps
terminfo.dev	Terminal feature compatibility database (161 features, 19 terminals)
Loggily	Structured logging + tracing + metrics

Coming

• Renderers — Canvas 2D, Web DOM (experimental today, production later)
• Frameworks — Svelte, Solid.js, Vue adapters
• Silvertea — Structured state management with commands, keybindings, effects-as-data (ships as @silvery/create)

Runtimes: Bun >= 1.0 and Node.js >= 23.6. CLI (silvery command) requires Bun.

Inspirations

Silvery builds on ideas from Ink (React for terminals), Ratatui (cell-level buffer model), shadcn/ui (polished defaults, semantic theming), SlateJS (plugin composition, operations-as-data), The Elm Architecture / BubbleTea (TEA state machines), the CSS/Web platform (flexbox, container queries, DOM events, focus scopes), VS Code (command palette, keybindings), Playwright (locator-based testing), ProseMirror (selection model), Blessed (rich terminal UIs in JS), and Textual (CSS-like terminal theming).

License

MIT