beorn/silvery

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()

![Silvery counter rendered in a terminal](docs/public/screenshots/counter-readme-static.svg)

React 18 + 19 with concurrent mode, Suspense, and flexbox layout. [Drop-in Ink compatible](https://silvery.dev/guide/silvery-vs-ink#compatibility) ([`@silvery/ink`](https://silvery.dev/guide/silvery-vs-ink)) — same `Box`, `Text`, `useInput` API with 918/931 Ink 7.0 tests passing.

### Shiny new stuff

- **[Best-in-class performance](https://silvery.dev/guide/silvery-vs-ink#performance-size)** — **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](https://silvery.dev/guide/layout-engine) (or Yoga). Works on Alpine, CI, Docker, everywhere.
- **[Web-like responsive layout](https://silvery.dev/guide/silvery-vs-ink#responsive-layout)** — `useBoxRect()` returns actual dimensions during render. No post-render measurement, no two-pass layout cycle. Enables:
  - [Scroll containers](https://silvery.dev/guide/scrolling) — `overflow="scroll"` with virtualization
  - [Sticky positioning](https://silvery.dev/guide/layout-coordinates) — `position="sticky"` for headers and footers

• 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. 38 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 10 swappable backends (xterm.js, Ghostty, Alacritty, WezTerm, Kitty, and more)
• SILVERYSTRICT — 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.