Hello World Demo
A simple introduction to terminal-window with fun ASCII art, animations, and ANSI color support. Click the buttons or type commands directly!
Basic Setup
<!-- Include the component -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@profpowell/terminal-window/dist/terminal-window.js"></script>
<!-- Add the terminal -->
<terminal-window
id="terminal"
theme="dark"
prompt="$ "
cursor-blink="true"
welcome="Welcome! Type 'help' for commands."
></terminal-window>
Register Custom Commands
const terminal = document.getElementById('terminal');
// Simple command
terminal.registerCommand('hello', () => {
return 'Hello, World!';
});
// Command with arguments
terminal.registerCommand('greet', (args) => {
const name = args[0] || 'friend';
return `Hello, ${name}!`;
});
// Command with ANSI colors
terminal.registerCommand('rainbow', () => {
return '\x1b[31mR\x1b[33mA\x1b[32mI\x1b[36mN\x1b[34mB\x1b[35mO\x1b[0mW';
});
Async Commands with Animation
// Typing animation
terminal.registerCommand('typewriter', async () => {
const text = "Typing one character at a time...";
for (const char of text) {
terminal.print(char, false); // false = no newline
await new Promise(r => setTimeout(r, 50));
}
return '\nDone!';
});
// Progress bar
terminal.registerCommand('loading', async () => {
for (let i = 0; i <= 10; i++) {
const bar = 'â–ˆ'.repeat(i) + 'â–‘'.repeat(10 - i);
terminal.print(`\r[${bar}] ${i * 10}%`, false);
await new Promise(r => setTimeout(r, 200));
}
return '\nComplete!';
});
Terminal Features
<!-- Light theme -->
<terminal-window theme="light"></terminal-window>
<!-- Custom prompt -->
<terminal-window prompt="user@host:~$ "></terminal-window>
<!-- Underline cursor -->
<terminal-window cursor-style="underline"></terminal-window>
<!-- Read-only mode (for demos) -->
<terminal-window readonly></terminal-window>