ANSI Output

Components for rendering ANSI escape sequences as colored terminal output in notebook cells

                                                                      
                                                                      
             ██                                                ██     
 ██▄████▄  ███████    ▄████▄    ██▄████   ▄█████▄   ▄█████▄  ███████  
 ██▀   ██    ██      ██▄▄▄▄██   ██▀       ▀ ▄▄▄██  ██▀    ▀    ██     
 ██    ██    ██      ██▀▀▀▀▀▀   ██       ▄██▀▀▀██  ██          ██     
 ██    ██    ██▄▄▄   ▀██▄▄▄▄█   ██       ██▄▄▄███  ▀██▄▄▄▄█    ██▄▄▄  
 ▀▀    ▀▀     ▀▀▀▀     ▀▀▀▀▀    ▀▀        ▀▀▀▀ ▀▀    ▀▀▀▀▀      ▀▀▀▀

Components for rendering ANSI escape sequences as colored text. Preserves the terminal colors developers expect from stdout, stderr, and error tracebacks.

Installation

npx shadcn@latest add @nteract/ansi-output

New to @nteract? pnpm dlx shadcn@latest registry add @nteract

Install the dependencies:

npm install anser escape-carriage

Copy the component to your project from the registry source.

Components

This package exports three components:

Component	Purpose
`AnsiOutput`	Base component for rendering ANSI text
`AnsiStreamOutput`	Specialized for stdout/stderr streams
`AnsiErrorOutput`	Specialized for error tracebacks

Demos

Toggle between light and dark mode to see how each rendering case behaves.

Plain text (no ANSI codes)

A simple print("hello") — no escape sequences at all. Should inherit the page's text color.

Hello, world!
This is plain uncolored output from a Jupyter kernel.
No ANSI escape codes here.

Standard 16 colors (foreground)

The basic 8 colors (codes 30–37) and their bright variants (90–97).

Standard (30–37)

██ Black ██ Red ██ Green ██ Yellow ██ Blue ██ Magenta ██ Cyan ██ White

Bright (90–97)

██ Bright Black  ██ Bright Red  ██ Bright Green  ██ Bright Yellow  ██ Bright Blue  ██ Bright Magenta  ██ Bright Cyan  ██ Bright White

Background colors

Standard background colors (codes 40–47) and bright backgrounds (100–107).

Standard backgrounds (40–47)

Black Red Green Yellow Blue Magenta Cyan White

Bright backgrounds (100–107)

Bright Black Bright Red Bright Green Bright Yellow Bright Blue Bright Magenta Bright Cyan Bright White

Text decorations

Bold, italic, underline, dim, strikethrough, and combinations.

Bold text Italic text Underlined text Dim text Strikethrough

Combined decorations + color

Bold Red Italic Blue Bold Underline Green Dim Magenta Bold Italic Underline Cyan

256-color palette (codes 38;5;n)

The extended 256-color palette. First 16 match standard/bright, then a 6×6×6 color cube (16–231), then a grayscale ramp (232–255).

Selected 256-color values

██ 196 ██ 208 ██ 226 ██ 46 ██ 21 ██ 93 ██ 201 ██ 39 ██ 170 ██ 82

256-color gradient

███████████████████████████████

Grayscale ramp (232–255)

████████████████████████

24-bit true color (codes 38;2;r;g;b)

Full RGB — the same encoding used in the nteract banner above.

RGB gradient

█████████████████████████████

24-bit background gradient

Mixed: foreground + background + decoration

 ERROR  File not found
 WARN   Deprecation notice
 OK     All tests passed
 INFO   Server started on port 8888
 DEBUG  Connection pool initialized

Realistic: pip install

Collecting numpy>=1.24
  Downloading numpy-2.2.6-cp312-cp312-macosx_14_0_arm64.whl (5.1 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 5.1/5.1 MB 12.3 MB/s eta 0:00:00
Collecting pandas>=2.0
  Downloading pandas-2.2.3-cp312-cp312-macosx_14_0_arm64.whl (11.3 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 11.3/11.3 MB 15.1 MB/s eta 0:00:00
Installing collected packages: numpy, pandas
Successfully installed numpy-2.2.6 pandas-2.2.3

Realistic: pytest output

================ test session starts ================
platform darwin -- Python 3.12.4, pytest-8.3.5
collected 5 items

tests/test_kernel.py ...F.

========== FAILURES ==========
___ test_execute_timeout ___

    def test_execute_timeout():
>       assert result.status == "ok"
E       AssertionError: assert 'error' == 'ok'

tests/test_kernel.py:42: AssertionError
==== 1 failed, 4 passed in 3.21s ====

Realistic: colored Python traceback

---------------------------------------------------------------------------
KeyError                                  Traceback (most recent call last)
Cell In[4], line 3
      1 import pandas as pd
      2 df = pd.DataFrame({'a': [1, 2, 3]})
----> 3 df['b']

KeyError: 'b'

Usage

AnsiOutput

The base component for rendering any text with ANSI escape sequences.

import { AnsiOutput } from "@/components/outputs/ansi-output"

export function Example() {
  const text = "\x1b[32mSuccess:\x1b[0m Operation completed"

  return <AnsiOutput>{text}</AnsiOutput>
}

Success: Operation completed

Props

Prop	Type	Default	Description
`children`	`string`	—	The text containing ANSI escape sequences
`className`	`string`	`""`	Additional CSS classes
`isError`	`boolean`	`false`	Applies error styling (red text)

AnsiStreamOutput

Renders stdout or stderr output with appropriate styling.

import { AnsiStreamOutput } from "@/components/outputs/ansi-output"

export function StreamExample() {
  return (
    <>
      <AnsiStreamOutput
        text="Hello from stdout"
        streamName="stdout"
      />
      <AnsiStreamOutput
        text="Warning: something went wrong"
        streamName="stderr"
      />
    </>
  )
}

stdout

Installing dependencies...
✓ numpy
✓ pandas
✓ matplotlib

stderr

DeprecationWarning: use_categorical is deprecated

Props

Prop	Type	Default	Description
`text`	`string`	—	The stream text to render
`streamName`	`"stdout" \| "stderr"`	—	Stream type (stderr renders in red)
`className`	`string`	`""`	Additional CSS classes

AnsiErrorOutput

Renders Python-style error tracebacks with proper formatting.

import { AnsiErrorOutput } from "@/components/outputs/ansi-output"

export function ErrorExample() {
  return (
    <AnsiErrorOutput
      ename="ValueError"
      evalue="invalid literal for int() with base 10: 'abc'"
      traceback={[
        "Traceback (most recent call last):",
        '  File "<stdin>", line 1, in <module>',
        "ValueError: invalid literal for int() with base 10: 'abc'"
      ]}
    />
  )
}

ValueError: invalid literal for int() with base 10: 'abc'

Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
    int('abc')
ValueError: invalid literal for int() with base 10: 'abc'

Props

Prop	Type	Default	Description
`ename`	`string`	—	Exception name (e.g., `"ValueError"`)
`evalue`	`string`	—	Exception value/message
`traceback`	`string[] \| string`	—	Traceback lines (array or joined string)
`className`	`string`	`""`	Additional CSS classes

ANSI Color Reference

Common ANSI escape sequences rendered by these components:

Code	Color	Example
`\x1b[30m`	Black	`████`
`\x1b[31m`	Red	`████`
`\x1b[32m`	Green	`████`
`\x1b[33m`	Yellow	`████`
`\x1b[34m`	Blue	`████`
`\x1b[35m`	Magenta	`████`
`\x1b[36m`	Cyan	`████`
`\x1b[37m`	White	`████`
`\x1b[0m`	Reset	—

ANSI Output

On this page