terminal-element

A Web Component for rendering terminal-style previews - works with any framework (React, Vue, Angular, Svelte, etc.)

Demo

📗 Storybook

🔗 Demo

Installation

npm install terminal-element

Usage

<terminal-element></terminal-element>

Additional themes are imported separately so only the themes you use are included by your bundler:

import "terminal-element";
import "terminal-element/themes/cappuccin-mocha.css";

<terminal-element theme="cappuccin-mocha"></terminal-element>

Props

Themes

Some additional themes sourced from iTerm2 color schemes are available other than built-in dark and light:

Prompt

Prompt - Displays before input lines:

type Prompt = string | Segment[];

String prompt:

prompt = "$";

Styled prompt:

prompt = [
  { text: "main", color: "green" },
  { text: " $", color: "cyan", bg: "black" },
];

Line

The content prop accepts an array of Line objects. Lines can render visible content or update previously rendered content.

InputLine - Displays a command with prompt:

type InputLine = {
  type: "input";
  id?: string;
  text: string;
};

OutputLine - Displays output text (with optional delay for animation):

// Simple text output
type OutputLineText = {
  type: "output";
  id?: string;
  text: string;
  color?: AnsiColorType;
  delay?: number; // Delay in ms before showing this line (animation only)
};

// Colored segments output
type OutputLineSegments = {
  type: "output";
  id?: string;
  segments: Segment[];
  delay?: number;
};

type Segment = {
  text: string;
  color?: AnsiColorType; // "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" and their "-bright" variants
  bg?: AnsiColorType;
};

// Remove previously rendered lines
type EraseLine = {
  type: "erase";
  count: number;
  delay?: number;
};

// String-based progress bar output
type ProgressBarLine = {
  type: "progress";
  id?: string;
  length: number;
  completeIn: number;
  startColor?: AnsiColorType;
  endColor?: AnsiColorType;
  indent?: number;
  completeChar?: string;
  incompleteChar?: string;
  delay?: number;
};

// Update a previously rendered line by id
type LineUpdateText = {
  type: "update";
  targetId: string;
  text: string;
  color?: AnsiColorType;
  delay?: number;
};

type LineUpdateSegments = {
  type: "update";
  targetId: string;
  segments: Segment[];
  delay?: number;
};

Example:

content = [
  { type: "input", text: "npm install" },
  { type: "output", text: "" },
  { type: "output", id: "install-status", text: "Installing..." },
  {
    type: "update",
    targetId: "install-status",
    text: "Resolving packages...",
    color: "yellow",
    delay: 800,
  },
  {
    type: "progress",
    length: 24,
    completeIn: 1500,
    startColor: "cyan",
    endColor: "green-bright",
    indent: 2,
  },
  { type: "erase", count: 1, delay: 800 },
  {
    type: "output",
    text: "added 50 packages in 2s",
    color: "green",
    delay: 500,
  },
  {
    type: "output",
    segments: [{ text: "✓", color: "green" }, { text: " Done!" }],
  },
];

Styling

Contributing

• Bug fix PRs are always welcome.
• UI changes or new features should not be submitted without prior discussion. Please open an issue first to propose and discuss them.

Thanks for your understanding and contributions.

License

MIT