Terminals

The terminal understands what programs write to a terminal: colours to 24 bits, bold and underline, cursor movement, scroll regions, line drawing, wide characters and emoji, titles and hyperlinks, and the alternate screen that editors, pagers and monitors draw on. Keys, pastes and the mouse go back to the program as the bytes it expects.

It connects to nothing by itself. write() takes the program's output and bmxData hands over what to send, so it sits on your WebSocket, SSH gateway or serial bridge. Only the rows in view are drawn and output is read between frames, so a flood of output never freezes the page.

A shell in the page

A pretend shell, running in this page. Try help, ls, build, colours or monitor (a full-screen program; q leaves it). Select text to copy it, Ctrl+Shift+F to search, and Ctrl+Shift+M to let Tab leave the terminal.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-terminal id="tm-shell" label="Shell" style="inline-size: 100%; --bmx-terminal-height: 20rem"></bmx-terminal>

A deploy log, read only

Output only, in the light scheme: a deployment's log as it streams. Web addresses are links (Ctrl+click), the title follows the program, and the scrollback keeps the last five thousand lines.

Deploy again

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-terminal id="tm-deploy" label="Deploy log" readonly appearance="light" convert-eol style="inline-size: 100%; --bmx-terminal-height: 16rem"></bmx-terminal>

A hundred thousand lines

A test run that prints a lot. The page stays responsive while it arrives; search it when it is done.

Print 100,000 lines

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-terminal id="tm-flood" label="Test output" readonly scrollback="100000" style="inline-size: 100%; --bmx-terminal-height: 14rem"></bmx-terminal>

Your connection

Connecting it to a real shell is a few lines: output in, input and size out. The other end is yours — a pseudo-terminal on your server, a container's exec, a device on a serial port.

const term = document.querySelector('bmx-terminal');
const socket = new WebSocket('wss://example.com/pty');
socket.binaryType = 'arraybuffer';

socket.onmessage = e => term.write(new Uint8Array(e.data));      // UTF-8, split anywhere
term.addEventListener('bmxData', e => socket.send(e.detail.data));
term.addEventListener('bmxResize', e =>
  socket.send(JSON.stringify({ resize: e.detail })));                // { cols, rows }