Terminal Player is a React component for playing back terminal recordings in the browser, built on top of xterm.js. Perfect for creating interactive terminal demos, tutorials, and documentation.

Features

• 🎬 Playback Controls: Play, pause, seek, and loop terminal recordings
• 🎨 Customizable Themes: Full terminal color theme support
• 📱 Responsive Design: Automatically adapts to container size
• ⚡ Performance: Optimized for smooth playback of long recordings
• 🔧 Easy Integration: Simple React component API
• 📹 asciinema Compatible: Works with standard .cast recording format

Installation

yarn add @arcblock/terminal

Quick Start

Basic Usage

import { Player } from '@arcblock/terminal';
import recordingData from './my-recording.json';

export default function Demo() {
  return <Player frames={recordingData.records} options={recordingData.config} loop={true} />;
}

Player Props

| Prop | Type | Default | Description | | ------------ | ---------- | ------------ | -------------------------------- | | frames | Array | required | Array of terminal frames to play | | options | Object | required | Player configuration and theme | | onStart | Function | - | Callback when playback starts | | onPause | Function | - | Callback when playback pauses | | onComplete | Function | - | Callback when playback completes |

Recording Terminal Sessions

1. Install asciinema

# macOS
brew install asciinema

# Ubuntu/Debian
sudo apt install asciinema

# pip
pipx install asciinema

2. Record Your Session

# Start recording
asciinema rec my-demo.cast

# ... perform your terminal commands ...

# Stop recording (Ctrl+D or type 'exit')

3. Convert to Player Format

Visit our online converter to transform your .cast file:

👉 https://arcblock.github.io/ux/?path=/story/data-display-terminal-player--recording-guide

• Drag & drop your .cast file
• Instant conversion and live preview
• Download the converted JSON file
• No command-line tools required!

Advanced Configuration

Custom Theme

const customOptions = {
  ...recordingData.config,
  theme: {
    background: '#1e1e1e',
    foreground: '#d4d4d4',
    cursor: '#ffffff',
    // ... more colors
  },
};

<Player frames={frames} options={customOptions} />;

Playback Options

const playbackOptions = {
  ...recordingData.config,
  frameDelay: 'auto', // or number in ms
  maxIdleTime: 2000, // max delay between frames
  repeat: true, // loop playback
  autoplay: true, // start automatically
};

Examples

Check out our Storybook demos:

• Basic Player
• Auto Play
• Loop Mode
• Recording Guide

Data Format

The Player expects data in this format:

{
  "config": {
    "cols": 80,
    "rows": 24,
    "frameDelay": "auto",
    "theme": {
      /* terminal colors */
    }
  },
  "records": [
    { "delay": 100, "content": "Hello World!\n" },
    { "delay": 500, "content": "Next command...\n" }
  ]
}

License

Apache 2.0