Examples

The best way to learn @bomb.sh/tty after the getting started guide is to run the demos in the tty repository. Each one is a small app that shows how the pieces fit together: render loop, input parsing, terminal modes, transitions.

Note

Examples are not shipped in the npm package. Clone the repo to run them. They also require a real terminal. They won’t run in the browser-based Clack WebContainer on this site.

Get set up

git clone --recurse-submodules \
  https://github.com/bombshell-dev/tty.git
cd tty
make          # build the WASM bundle
deno run examples/keyboard/index.ts

Note

Requires Deno. Run all commands from the repository root (tty/), not from inside examples/. If you cloned without --recurse-submodules, run git submodule update --init before make. To use Node >= 22 instead, install the examples’ one dependency first with npm install --no-save effection, then run node examples/keyboard/index.ts.

Which demo should I run?

Demo	Start here if you want to…	Key APIs
Keyboard	Wire up input, pointer hover, and terminal modes	createInput, settings, render pointer option
Text input	Build a text field with a real cursor	text caret, createInput
Transitions	Animate layout and color between frames	open transitions, animating
Inline regions	Draw animated output in scrollback, not full-screen	render line mode, DSR
2048	See everything combined in a real app	ops, term, input, settings
Diff	Highlight per-glyph in a layout	text bg

Suggested order: keyboard → text input → transitions → inline regions → 2048. Diff is a focused layout exercise you can skip until you need it.

Keyboard

examples/keyboard/index.ts

deno run examples/keyboard/index.ts

This is the best first demo. It shows the full loop most apps follow:

1. Apply terminal settings (alternate buffer, hidden cursor, mouse tracking)
2. Create a term and feed pointer state each frame
3. Parse stdin through createInput and dispatch events
4. Revert settings on exit

Type on the keyboard to see decoded key events. Move the mouse to see hover styles. Clay handles hit testing, so you don’t need manual coordinate math.

Text input

examples/text-input/index.ts

deno run examples/text-input/index.ts

A single “Name:” field with a real terminal cursor. Type to insert at the cursor, press ← and → to move it, and Backspace to delete the character before it. Esc or Ctrl+C exits.

It shows how little a text input needs on top of the keyboard loop:

1. Keep the value and the cursor position as plain state
2. Update both from createInput key events, counting positions in code points
3. Render the value with text(value, { caret }), and the renderer places and shows the cursor

Transitions

examples/transitions/sidebar.ts · examples/transitions/notecards.ts

deno run examples/transitions/sidebar.ts
deno run examples/transitions/notecards.ts

Change layout or style properties between frames and attach a transition to elements. Gate your render loop on animating so you only redraw while motion is in progress.

The sidebar demo animates width with keyboard shortcuts. Notecards interpolates layout and background color.

Inline regions

examples/inline-regions/index.ts

deno run examples/inline-regions/index.ts

Renders spinners, progress bars, and small animations into normal scrollback instead of taking over the screen. Uses DSR to query cursor position and render in line mode to update a fixed region.

Reach for this pattern when you want live output inside a regular CLI workflow (build logs, install progress, status lines) without switching to the alternate buffer.

2048

examples/2048/index.ts

deno run examples/2048/index.ts

A complete game combining transitions, keyboard focus, pointer clicks, live resize, and an fps counter. Good reference once you understand the basics.

Controls: arrows or wasd to move · Tab/Shift+Tab for focus · Enter/Space to activate · n new game · u undo · q or Ctrl+C to quit

Diff

examples/diff/index.ts

deno run examples/diff/index.ts

A code-review diff view with per-glyph bg highlighting on text nodes. Useful if you’re building structured, read-only output rather than interactive UI.

Next steps

• Getting Started (install, architecture, quick starts)
• Term API (render loop and pointer events)
• Input API (stdin event parsing)