<terminal-window>

A vanilla JavaScript web component for simulating terminal interfaces with typing effects, command history, and virtual filesystem support.

View Demos API Documentation

Features

Interactive Commands

Built-in shell commands like ls, cd, pwd, cat, and more. Add custom command handlers for your own functionality.

Typing Animation

Realistic typing effect with configurable speed. Perfect for tutorials, demos, and documentation.

Light & Dark Themes

Built-in theme support with customizable colors via CSS custom properties.

Cursor Customization

Choose between block, underline, or bar cursor styles with optional blinking animation.

ANSI Color Support

Full ANSI escape code support for colorful terminal output, including bold, italic, and underline.

Virtual Filesystem

Optional in-memory filesystem for realistic file operations without server requirements.

Quick Start

Installation

Install via npm:

npm install @profpowell/terminal-window

Or use a CDN:

Basic Usage

<terminal-window theme="dark" prompt="$ " welcome="Welcome! Type 'help' for commands." ></terminal-window> <script type="module"> import '@profpowell/terminal-window'; </script>

With Custom Commands

<terminal-window id="my-terminal"></terminal-window> <script type="module"> import '@profpowell/terminal-window'; const terminal = document.getElementById('my-terminal'); terminal.registerCommand('greet', (args) => { return `Hello, ${args[0] || 'World'}!`; }); </script>

See more examples in the Demos or read the full API documentation.