ANSI Terminal Display Examples

Display terminal output with ANSI color code support and multiple themes.

Type Interface

import type { BaseChartProps } from '../../types';

export interface AnsiProps extends BaseChartProps {
  content: string;

  // Terminal appearance
  theme?: 'dark' | 'light' | 'monokai' | 'solarized-dark' | 'solarized-light';
  fontFamily?: string;
  fontSize?: number;
  lineHeight?: number;

  // Display options
  showPrompt?: boolean;
  promptText?: string;
  wrap?: boolean;

  // Interactive features
  copyable?: boolean;
  selectable?: boolean;
}

Test Output (Dark Theme)

$ ✓ Tests passed: 42
✗ Tests failed: 3
! Warnings: 7
Test Results:
PASSED test/unit/parser.test.ts
PASSED test/unit/renderer.test.ts
FAILED test/integration/api.test.ts
Build completed in 2.3s

import { ANSI } from '@vuer-ai/vuer-viz';

const sampleOutput = `\x1b[32m✓\x1b[0m Tests passed: 42
\x1b[31m✗\x1b[0m Tests failed: 3
\x1b[33m!\x1b[0m Warnings: 7

\x1b[1mTest Results:\x1b[0m
\x1b[32mPASSED\x1b[0m test/unit/parser.test.ts
\x1b[32mPASSED\x1b[0m test/unit/renderer.test.ts
\x1b[31mFAILED\x1b[0m test/integration/api.test.ts

\x1b[36mBuild completed in 2.3s\x1b[0m`;

export default function TestOutputExample() {
  return (
    <ANSI
      content={sampleOutput}
      theme="dark"
      showPrompt={true}
    />
  );
}

Build Output (Monokai Theme)

vite v5.0.0 building for production...
✓ 127 modules transformed.
dist/index.html                  0.45 kB
dist/assets/index-abc123.css    12.34 kB
dist/assets/index-def456.js    145.67 kB
✓ built in 3.21s

import { ANSI } from '@vuer-ai/vuer-viz';

const buildOutput = `\x1b[1m\x1b[36mvite\x1b[0m v5.0.0 building for production...
\x1b[32m✓\x1b[0m 127 modules transformed.
\x1b[32mdist/index.html\x1b[0m                  0.45 kB
\x1b[32mdist/assets/index-abc123.css\x1b[0m    12.34 kB
\x1b[32mdist/assets/index-def456.js\x1b[0m    145.67 kB

\x1b[1m\x1b[32m✓ built in 3.21s\x1b[0m`;

export default function BuildOutputExample() {
  return (
    <ANSI
      content={buildOutput}
      theme="monokai"
      copyable={true}
    />
  );
}

Error Messages (Light Theme)

Error: Module not found
  at webpack:///./src/index.ts:5:0
  at loadModule (/node_modules/...)
Warning: Unused variable 'foo'
  at src/components/Chart.tsx:42:7

import { ANSI } from '@vuer-ai/vuer-viz';

const errorOutput = `\x1b[31mError:\x1b[0m Module not found
  \x1b[90mat\x1b[0m webpack:///./src/index.ts:5:0
  \x1b[90mat\x1b[0m loadModule (/node_modules/...)

\x1b[33mWarning:\x1b[0m Unused variable 'foo'
  \x1b[90mat\x1b[0m src/components/Chart.tsx:42:7`;

export default function ErrorMessagesExample() {
  return (
    <ANSI
      content={errorOutput}
      theme="light"
      copyable={true}
    />
  );
}

Solarized Dark

✓ Tests passed: 42
✗ Tests failed: 3
! Warnings: 7
Test Results:
PASSED test/unit/parser.test.ts
PASSED test/unit/renderer.test.ts
FAILED test/integration/api.test.ts
Build completed in 2.3s

import { ANSI } from '@vuer-ai/vuer-viz';

const sampleOutput = `\x1b[32m✓\x1b[0m Tests passed: 42
\x1b[31m✗\x1b[0m Tests failed: 3
\x1b[33m!\x1b[0m Warnings: 7

\x1b[1mTest Results:\x1b[0m
\x1b[32mPASSED\x1b[0m test/unit/parser.test.ts
\x1b[32mPASSED\x1b[0m test/unit/renderer.test.ts
\x1b[31mFAILED\x1b[0m test/integration/api.test.ts

\x1b[36mBuild completed in 2.3s\x1b[0m`;

export default function SolarizedExample() {
  return (
    <ANSI
      content={sampleOutput}
      theme="solarized-dark"
      showPrompt={false}
    />
  );
}

Features

ANSI color code parsing and rendering
Multiple themes: dark, light, monokai, solarized-dark, solarized-light
Support for basic ANSI codes (colors, bold, italic, underline)
Optional prompt display
Copy to clipboard functionality
Selectable/non-selectable text
Text wrapping control
Monospace font rendering

← Back to all charts