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 https://nteract-elements.vercel.app/r/ansi-output.json

Install the dependency:

npm install ansi-to-react

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

Usage

AnsiOutput

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

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

export function Example() {
  const text = "\x1b[32mSuccess:\x1b[0m Operation completed"
  
  return <AnsiOutput>{text}</AnsiOutput>
}

Success: Operation completed

Here's a more colorful example:

Black Red Green Yellow Blue Magenta Cyan White

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 "@/registry/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 "@/registry/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