LogViewer

A styled log output panel with column layout, level-based coloring, and optional live indicator. Useful for displaying structured log entries.

Example

Time

Level

Message

10:00

info

Server started on port 3000

10:01

info

Database connected

10:02

warn

Cache miss rate above threshold

10:03

error

Failed to connect to Redis

10:04

debug

Retrying connection...

10:05

info

Redis reconnected

Props

Prop	Type	Default	Description
`entries`	`LogEntry[]`	—	Array of log entries to display
`columns`	`LogColumn[]`	—	Column definitions for the grid layout
`showHeader`	`boolean`	`false`	Show column header row
`live`	`boolean`	`false`	Show live/paused indicator dot
`height`	`string`	`'220px'`	Height of the scrollable log body
`autoscroll`	`boolean`	`true`	Auto-scroll to bottom on new entries
`class`	`string`	—	Additional CSS classes

Types

Type	Definition
`LogEntry`	`{ level: 'info' \| 'error' \| 'warn' \| 'debug'; [key: string]: string }`
`LogColumn`	`{ key: string; label?: string; align?: 'left' \| 'right' \| 'center'; width?: string }`

Usage

<script>
  import { LogViewer } from '@chrissnell/chonky-ui';

  const columns = [
    { key: 'time', label: 'Time', width: '80px' },
    { key: 'level', label: 'Level', width: '50px' },
    { key: 'message', label: 'Message', width: '1fr' }
  ];

  const entries = [
    { level: 'info', time: '10:00', message: 'Server started on port 3000' },
    { level: 'warn', time: '10:02', message: 'Cache miss rate above threshold' },
    { level: 'error', time: '10:03', message: 'Failed to connect to Redis' },
    { level: 'debug', time: '10:04', message: 'Retrying connection...' },
  ];
</script>

<LogViewer {columns} {entries} showHeader live />