Terminal replay
A terminal session played back: each command typed at the prompt, its output line by line, the screen following the last line — or the whole session at rest, as the server renders it.
Web only — React, from @krizaka/ui/terminal-replay. Beta: its API may still change in a minor version.
When to use
- Show how a command-line tool works from a recording of a real session: install, start, run.
- A getting-started page where the reader should see the order of the commands and what each one answers.
When not to use
- For commands the reader copies and runs, with nothing to watch.Use instead: Kbd
- For a video of an application's screens: record the screens, not a terminal.Use instead: Video player
- For output you wrote by hand: replay what the tool really printed, or show none.
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { TerminalReplay } from "@krizaka/ui/terminal-replay";Examples
A session
Three commands typed one after the other, their output line by line; it starts when it scrolls into view.
$ mkdir shop && cd shop $ npm install @krizaka/ui added 12 packages in 2s found 0 vulnerabilities $ npm run dev ▲ Next.js 16 - Local: http://localhost:3000 ✓ Ready in 1.4s
At rest
autoPlay={false}: the whole session is shown until the reader presses play — a page that should stay still.
$ node --version && git --version v22.12.0 git version 2.47.1 $ docker compose version Docker Compose version v2.31.0
Props
A terminal session played back: commands typed at the prompt, their output line by line — or the whole session at rest.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | The accessible name of the screen (“Terminal session: install, start, dev”) — passed translated. |
pauseLabelrequired | string | — | The pause button's words (the replay is running). |
playLabelrequired | string | — | The play button's words (the replay is waiting or paused). |
replayLabelrequired | string | — | The replay button's words (the session is shown whole). |
stepsrequired | readonly TerminalStep[] | — | The session, in order. |
autoPlay | boolean | true | Plays the first time it scrolls into view. false: the session rests whole until the reader presses play. |
copiedLabel | string | — | What the copy button says once the commands are copied (announced politely). |
copyLabel | string | — | The copy button's words: it copies the commands, one per line. Without it, no copy button. |
lineDelay | number | 70 | Milliseconds between two output lines. |
prompt | string | $ | What the prompt shows before each command. |
rows | number | 18 | The screen's height, in lines; longer sessions scroll. |
stepDelay | number | 900 | Milliseconds between a command's last line and the next command. |
title | ReactNode | — | The window's title, shown in its bar (~/projects — zsh). |
typingSpeed | number | 34 | Milliseconds per typed character. |
Accessibility
- The screen is a named region holding the whole transcript for assistive technology; the characters being typed are hidden from it — never read letter by letter.
- It starts when it scrolls into view and waits while it is off screen; a control pauses it, plays it or replays it (WCAG 2.2.2).
- Under
prefers-reduced-motion, without JavaScript and before it plays, the whole session is shown at rest; the caret does not blink. - The copy button says it copied in a polite live region.
Keyboard
| Keys | Action |
|---|---|
| Tab | Focuses the play, pause or replay control, the copy button, then the screen, which scrolls with the arrow keys. |
Best practices
- Replay a real session, captured from the tool itself — never an invented output.
- Keep each step short: a long output is trimmed where it repeats, and says it was trimmed.
- Name the screen (
label) by what it shows; the words of the controls arrive as props, translated. - Give the copy button (
copyLabel) when the commands are meant to be run.
Related components
Generated from the code of @krizaka/ui 2.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Media capture
The camera in the page: a photo or a clip, front or back, the permission asked only on a gesture, and a way out every time the camera cannot start.
Video player
A video with accessible controls — HLS through an hls.js loaded only when needed, signed sources resolved at the last moment, subtitles, speed, full screen, a pause when it leaves the screen.