LogViewer
Virtualized monospace console for high-frequency log and stream output
Category: display · WCAG 2.2-AA · log, stream, virtual, console, terminal, monospace
States
- following
- paused
- empty
Props
| Prop | Type | Default | Description |
|---|---|---|---|
lines | ReadonlySignal<readonly LogLine[]> | readonly LogLine[] | — | The log lines to display (a signal or array). |
rowHeight | number | 20 | Height of each row in pixels, used for virtualization. |
overscan | number | 8 | Number of extra rows rendered above and below the viewport. |
follow | boolean | — | Whether the view auto-scrolls to follow new lines (controlled). |
onFollowChange | (follow: boolean) => void | — | Called with the new follow state when it changes. |
ansi | boolean | false | When true, parses ANSI color escape codes into colored spans. |
search | string | — | Query used to filter and highlight matching lines. |
maxHeight | string | '24rem' | Maximum height of the scroll viewport (CSS length). |
labels | LogViewerLabels | — | Overrides for the component’s user-visible strings (i18n). |
Design tokens
--cascivo-font-mono--cascivo-color-text--cascivo-color-text-muted--cascivo-color-surface--cascivo-color-surface-raised--cascivo-color-border--cascivo-color-error--cascivo-color-warning--cascivo-color-success--cascivo-color-info--cascivo-color-accent--cascivo-target-min-coarse
When to use
- Rendering continuous, high-volume log or stream output (build/deploy logs, server output)
- Showing thousands of lines without mounting a DOM node per line
- Auto-following live output while letting the user scroll back to inspect history
When not to use
- A short, static block of code or output — use a <pre> or Code block
- Tabular data with columns — use DataTable
- A rich interactive terminal with cursor addressing — out of scope (line-oriented only)
How to build an accessible LogViewer in React →
Examples
Streaming build log
Backed by createStreamBuffer; auto-follows the tail
const logs = useStreamBuffer<LogLine>({ capacity: 1000 })
// socket.onmessage = (e) => logs.append({ id: seq++, text: e.data })
<LogViewer lines={logs.signal} />Static log with levels
<LogViewer lines={[{ id: 1, text: "Build started", level: "info" }, { id: 2, text: "Type error", level: "error" }]} />ANSI colored output
<LogViewer ansi lines={ansiLines} maxHeight="32rem" />Related components
- createStreamBuffer — Provides the bounded, O(1) signal LogViewer renders
- DataTable — DataTable virtualizes tabular rows; LogViewer virtualizes monospace lines