Terminal Session Web Component Demo

Basic Example

A simple terminal showing a git workflow session:

Light Theme Example

Same session with light theme:

Custom Colors Example

Terminal with custom color scheme:

Customizable Toolbar & Header

Fine-grained control over all UI elements:

No Window Buttons

No Control Buttons

Play Button Only

No Header At All

🧪 Test Tab Closing & Theme Toggle Features

Test the new tab closing and theme toggle functionality:

🔄 Tab Closing Test Instructions:

Switch between tabs to see different content (Frontend, API, Tests, etc.)
Close the active tab by clicking the × button - content should immediately switch to the next tab
Try closing different tabs - each has unique content so you can verify the switch works
Close multiple tabs to test the behavior with fewer tabs remaining

🎨 Theme Toggle Test Instructions:

Look for the theme toggle button (☀/🌙) in the terminal header
Click the theme button - theme should change immediately
Toggle multiple times to verify smooth switching between light/dark themes

✅ Expected Behavior:
• Tab closing: Content switches immediately to next tab, no stale content
• Theme toggle: Instant theme change with button icon updating
• Background processing: Tabs continue running when you switch between them

Minimal Tabbed Terminal

Tabs below header without any control buttons for a clean interface:

Completely Minimal - No Toolbar

Terminal without any header or controls, just the content:

💡 Perfect for embedding in documentation or tutorials

Rich Text Colorization

Terminal with colorized output similar to real terminal applications:

Interactive Controls

Features

🎨 Themeable

Light/dark themes with custom color overrides

▶️ Playback Control

Play, pause, and reset session recordings

🎯 Step Types

Command, output, error, warning, info, success

⚡ Performant

Built with Svelte 5 for optimal performance

📦 Web Component

Works with any framework or vanilla JS

🔧 Customizable

Configurable speed, colors, and behavior

🎛️ Full UI Control

Show/hide header, window buttons, and control buttons individually

⌨️ Typing Effect

Realistic typing animation with variable speed

📑 Advanced Tabs

Background processing, closable tabs, top/bottom position

👁️ Smart Autoplay

Autoplay on visibility, tab switch, or manual trigger

🔄 State Persistence

Tabs maintain state when switching

🎯 Web Component

HTML attributes with proper type conversion

Usage Examples

          <!-- Basic terminal with custom controls -->
          <terminal-session theme="dark" autoplay="true" playback-speed="1.5"
          title="My Terminal" show-window-buttons="false"
          show-reset-button="false" ></terminal-session> <!--
          Minimal terminal without header --> <terminal-session
          show-header="false" autoplay="true" ></terminal-session>
          <!-- Tabbed terminal with bottom tabs --> <terminal-session
          show-tabs="true" tab-bar-position="bottom" allow-tab-close="true"
          ></terminal-session> <script> const terminal =
          document.querySelector('terminal-session'); // Set a simple session
          terminal.session = [ { type: 'command', content: 'npm install', delay:
          500 }, { type: 'output', content: 'Installing...', delay: 1000 }, {
          type: 'success', content: 'Done!', delay: 500 } ]; // Or set tabs for
          multiple sessions terminal.tabs = [ { id: 'tab1', title: 'Server',
          icon: '🖥️', session: serverSession, closable: true }, { id: 'tab2',
          title: 'Tests', icon: '🧪', session: testSession } ]; </script>
        

🖥️ Terminal Session Web Component Demo