Introduction
Easily orchestrate terminal sessions in React.
Termkit renders live terminal sessions in React. You drop in a <Terminal />,
and manage every session — including which ones are ringing for your attention —
with a small set of hooks.
The mental model
- A session is a long-lived shell (a PTY) that lives in the daemon
(
@mp-lb/termkit-server), addressed by a stable id you choose. - A
<Terminal session={id} />is a view onto a session. Mounting it attaches — reconnecting to the existing shell if there is one, replaying a snapshot of the current screen — and unmounting detaches but leaves the shell running. - A
<TermkitProvider>holds the global registry of sessions and polls the daemon for what's alive. So there's no one-to-one requirement between the terminals on screen and the sessions that are alive: you can have background sessions with no terminal, and see and manage them from anywhere.
That last point is the whole reason termkit exists. A naive terminal component ties a session's life to the component's life. Termkit separates them, so closing a tab doesn't kill the shell, and a shell can ring for attention while you're looking somewhere else entirely.
The packages
| Package | What it is |
|---|---|
@mp-lb/termkit | The React library: <Terminal>, the provider, and the session/bell hooks. |
@mp-lb/termkit-server | The standalone PTY daemon, the headless screen model, and a daemon HTTP client. |
@mp-lb/termkit-core | Runtime-safe shared bits: the wire protocol, the LiveSession type, session-name helpers. |
@mp-lb/termkit-trpc | A turnkey tRPC router (list / kill / clear-bell) over the daemon client. |
Install
pnpm add @mp-lb/termkit@mp-lb/termkit lists react as a peer dependency. To actually run sessions you
also need a daemon to connect to — see Server & daemon.