Log Viewer
A streaming console with filtering, level facets and follow mode.
- Data
- 2 files
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add log-viewernpm packages installed: @tanstack/react-virtual.
import { LogViewer } from "@/components/ui/log-viewer";Default
Streaming
Many Lines
Incomplete Pattern
No Matches
<LogViewer>
| Prop | Type | Default |
|---|---|---|
label (required)Names the region. | string | — |
lines (required) | VisibleLine[] | — |
announceRead new lines aloud. Off by default — a console that announces every line makes a screen reader useless for anything else. | boolean | false |
height | number | string | 360 |
onDownloadThe way out of the virtual window, for anyone who needs the whole log. | () => void | — |
rowHeightRow height in pixels. Rows are one line; expansion is measured. | number | 22 |
children | ReactNode | — |
Plus every attribute of <div> except children.
<LogViewerRow>
| Prop | Type | Default |
|---|---|---|
line (required) | VisibleLine | — |
expanded | boolean | false |
onToggle | () => void | — |
<LogViewerToolbar>
| Prop | Type | Default |
|---|---|---|
counts (required) | Map<LogLevel, number> | — |
levels (required) | Set<LogLevel> | — |
onQueryChange (required) | (query: string) => void | — |
onRegexChange (required) | (regex: boolean) => void | — |
onToggleLevel (required) | (level: LogLevel) => void | — |
query (required) | string | — |
regex (required) | boolean | — |
showing (required)Shown as "N of M lines". | number | — |
total (required) | number | — |
invalidPattern | boolean | false |
Plus every attribute of <div> except onChange.
role="log" implies aria-live="polite", which is right for a few events and unusable for a console — a screen reader would read every line of a build and nothing else would be audible. Announcing is off by default and opt-in. Virtualization is the harder trade: most rows are not in the DOM, so assistive technology cannot reach them, which is why the component takes an onDownload escape rather than pretending the virtual window is the whole log. Levels are written in text as well as coloured, matches use mark elements rather than a background colour, and an invalid pattern is announced instead of silently showing an empty log that reads as "nothing matched".
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes