ReferenceComponentsLogs, JSON, and diffs
CodeViewer
CodeViewer component API, behavior, and executable example.
Loading executable example…
API and events
Inspect streaming logs, expandable structured values, and line-oriented changes in terminal-bounded viewports.
export function CodeViewer(props: CodeViewerProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
source | string | Yes | The source member uses the string contract. | — |
language | string | undefined | No | The language member uses the string | undefined contract. | — |
width | number | undefined | No | The width member uses the number | undefined contract. | — |
lineNumbers | boolean | undefined | No | The lineNumbers member uses the boolean | undefined contract. | — |
theme | CodeTheme | undefined | No | The theme member uses the CodeTheme | undefined contract. | CodeTheme |
id | string | undefined | No | The id member uses the string | undefined contract. | — |
label | string | undefined | No | The label member uses the string | undefined contract. | — |
autoFocus | boolean | undefined | No | The autoFocus member uses the boolean | undefined contract. | — |
wrap | boolean | undefined | No | The wrap member uses the boolean | undefined contract. | — |
horizontalOffset | number | undefined | No | The horizontalOffset member uses the number | undefined contract. | — |
foldedLines | ReadonlySet<number> | undefined | No | The foldedLines member uses the ReadonlySet<number> | undefined contract. | — |
search | string | RegExp | undefined | No | The search member uses the string | RegExp | undefined contract. | — |
clipboard | { write(value: string): void | Promise<void>; } | undefined | No | The clipboard member uses the { write(value: string): void | Promise<void>; } | undefined contract. | — |
onCopy | ((value: string) => void | Promise<void>) | undefined | No | The onCopy member uses the ((value: string) => void | Promise<void>) | undefined contract. | — |
selectedLine | number | undefined | No | The selectedLine member uses the number | undefined contract. | — |
onSelectedLineChange | ((line: number) => void | Promise<void>) | undefined | No | The onSelectedLineChange member uses the ((line: number) => void | Promise<void>) | undefined contract. | — |
LogViewer reports follow state; JSON expansion can be controlled; pure transformation helpers emit nothing.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
Viewers scroll and filter; JSON nodes expand or collapse; diff output remains deterministic in static mode.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { CodeViewer } from "@/components/tuil/data-display/log-viewer";