Log Viewer

Streaming logs: levels, highlighted search, tail follow, JSON lines. Pro · Developer tools › Code and logs

Streaming log viewer: levels, search with highlights, follow-tail, wrap, JSON payloads and copy.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add log-viewer

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { LogViewer } from 'valyro-ui-pro';

Props

Prop	Type	Default
`entries` *	`readonly LogEntry[]`		All lines, oldest first. Append to stream; trim the front to cap memory.
`title`	`ReactNode`		Shown at the start of the toolbar.
`actions`	`ReactNode`		Extra toolbar content at the end, e.g. a pause or clear button.
`height`	`CSSProperties['height']`	`420`	Height of the scrolling log area. Default 420.
`follow`	`boolean`		Keep the newest line in view. Scrolling up pauses it; scrolling back to the end resumes.
`defaultFollow`	`boolean`	`true`	Default true.
`onFollowChange`	`(follow: boolean) => void`		Called with the new `follow` when it changes.
`wrap`	`boolean`		Soft-wrap long lines instead of cutting them off.
`defaultWrap`	`boolean`	`false`	Initial `wrap` when uncontrolled.
`onWrapChange`	`(wrap: boolean) => void`		Called with the new `wrap` when it changes.
`levels`	`LogLevel[]`		Levels shown. Default: all.
`defaultLevels`	`LogLevel[]`		Initial `levels` when uncontrolled.
`onLevelsChange`	`(levels: LogLevel[]) => void`		Called with the new `levels` when it changes.
`query`	`string`		Search text; matches are highlighted and stepped through with Enter / Shift+Enter.
`defaultQuery`	`string`	`''`	Initial `query` when uncontrolled.
`onQueryChange`	`(query: string) => void`		Called with the new `query` when it changes.
`live`	`boolean`	`false`	The stream is connected: shows a live indicator in the status bar.
`formatTimestamp`	`(date: Date) => string`		Default: 24-hour time with milliseconds in the locale.
`locale`	`string`		BCP 47 locale for times and counts. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<LogViewerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Code Block — Syntax-highlighted code
Diff Viewer — Multi-file diff: file list with stats, unified and split views, word highlights
Request Inspector — HTTP request log: filters, headers, bodies and a timing waterfall
API Key Manager — API keys: create with scopes and expiry, show the secret once, revoke
Api Playground — API playground: model, parameters, prompts and JSON request/response
Webhook Endpoints — Webhooks: endpoints, events, toggles and delivery rate
Certificate List — SSL/TLS certificates: time to expiry, auto-renewal, legend
Status Page — Status page: overall banner, 90-day uptime, incidents and subscriptions
Storage Usage — Storage: usage by category and cleanup actions
Download Center — Exports: file types, size, link expiry and re-request
Feature Flag Simulator — Preview the product under different feature flags and segments, no production access

Previous: Diff Viewer · Next: Request Inspector · All Developer tools