Running in a Terminal

text run runs the same app in a terminal. Layout, components, keymaps and route handlers are shared, and the output is truecolor ANSI instead of %c CSS spans.

#text run

Add a script and run it:

bun run tui                        # render ./app at /bun run tui -- --path /deployments # start on another route

text run imports every file in app/, mounts the App Router with an in-memory history and draws it full-screen. <Link>, useRouter(), notFound() and redirect() work unchanged, and same-origin fetch("/api/…") calls run your route handlers in-process. Ctrl+C quits and restores your scrollback. It needs Bun.

#Quit with q

Terminal users expect q. useApp().exit() unmounts the app and restores the terminal; in the browser it unmounts the console app.

#Your own CLI

For a single component, use renderToTerminal. It mounts one element without the App Router, and fetch("/api/…") only reaches your route handlers under text run, so pass the component its data:

import { renderToTerminal } from "@textjs/app/terminal";import { Table } from "@textjs/app";import { DEPLOYMENTS } from "./lib/deployments";const columns = [{ key: "commit", header: "Commit" }, { key: "project", header: "Project", width: 10 }];const app = await renderToTerminal(<Table columns={columns} rows={DEPLOYMENTS} autoFocus />);await app.waitUntilExit();

Run it with bun cli.tsx. DeploymentsPage fetches its rows, so it needs text run.

#What's different

Terminals repaint faster (up to 60fps instead of ~15) and size the grid to the window instead of the docked console. Images need pixel data instead of a URL. Everything else, including this dashboard, is the same code.