terminal-window

A zero-dependency vanilla-JS web component that renders a styled terminal with prompts, ANSI color, optional typing animation, and a registry for custom commands — ideal for documentation demos, tutorials, and interactive CLI mockups. It honors Vanilla Breeze surface, text, border, and --font-mono tokens via the VB external-components bridge, with a full set of --terminal-window-* properties for per-instance overrides.

Where to find it

npm: @profpowell/terminal-window
GitHub: ProfPowell/terminal-window
Live demos: profpowell.github.io/terminal-window
License: MIT

Install

Via CDN:

Or via npm:

Not currently bundled into Vanilla Breeze — wire it in yourself. VB ships a --terminal-window-* bridge in src/utils/external-components.css, so theme inheritance is automatic the moment you include the script.

Demo

A live <terminal-window> with a welcome banner, typing animation, and the built-in help, clear, echo, and history commands. The window chrome reads VB surface and border tokens; the prompt uses --color-success. Switch the site theme to see the chrome re-skin.

Quick reference — common attributes

Attribute	Default	Purpose
`title`	`"Terminal"`	Title text in the window header.
`prompt`	`"$ "`	Prompt prefix shown before user input.
`welcome`	—	One-line welcome banner printed on mount.
`typing-effect`	off	Boolean — animate output characters.
`typing-speed`	`30`	Milliseconds per character when typing-effect is on.
`cursor-style`	`block`	`block`, `underline`, or `bar`.
`cursor-blink`	on	Boolean — blink the input cursor.
`readonly`	off	Boolean — disable input, useful for static transcripts.
`max-lines`	`1000`	Scrollback buffer cap.
`enable-vfs`	off	Boolean — enable the built-in virtual filesystem commands (`ls`, `cd`, `pwd`, `mkdir`, `touch`, `rm`, `cat`).
`persist-history`	off	Boolean — store command history in `localStorage`.

See the README for the full attribute list and JS API (registerCommand, print, setTypingEffect, etc.).

VB integration

VB's src/utils/external-components.css contains a terminal-window {…} block mapping VB tokens onto the --terminal-window-* surface. No per-page wiring required — drop the script in and the terminal picks up the active theme automatically. Per-instance overrides still win: set any --terminal-window-* token on the element itself or in a theme block to customize a single terminal.

Welcome to Vanilla Breeze