Diff Viewer

Multi-file diff: file list with stats, unified and split views, word highlights. Pro · Developer tools › Code and logs

Read-only multi-file code diff: file list with stats, unified or split view, word-level and syntax highlighting.

Installation

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

npm install valyro-ui-pro

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

Prop	Type	Default
`files` *	`DiffFile[]`		Changed files, each with its text before and after; the diff is computed from the two texts.
`title`	`ReactNode`		Shown at the start of the header, before the summary.
`view`	`'unified' \| 'split'`		Below ~560px of diff width `split` shows as `unified` (two columns that narrow would break code mid-token), and the view switch is hidden until there is room again.
`defaultView`	`'unified' \| 'split'`	`'unified'`	Default `unified`.
`onViewChange`	`(view: DiffViewerView) => void`		Called with the new `view` when it changes.
`context`	`number`	`3`	Unchanged lines kept around each change; longer unchanged runs collapse. Default 3.
`collapsed`	`string[]`		Paths of files shown collapsed.
`defaultCollapsed`	`string[]`	`[]`	Initial `collapsed` when uncontrolled.
`onCollapsedChange`	`(paths: string[]) => void`		Called with the new `collapsed` when it changes.
`showFileList`	`boolean`		File list beside the diff. Default: when there is more than one file.
`height`	`CSSProperties['height']`	`560`	Height of the scrolling diff area. Default 560.
`locale`	`string`		BCP 47 locale for counts. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<DiffViewerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Code Block — Syntax-highlighted code
Log Viewer — Streaming logs: levels, highlighted search, tail follow, JSON lines
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