ReferenceComponentsLogs, JSON, and diffs
JsonViewer
JsonViewer component API, behavior, and executable example.
Loading executable example…
API and events
Inspect streaming logs, expandable structured values, and line-oriented changes in terminal-bounded viewports.
export function JsonViewer({
value,
expandedPaths,
defaultExpandedPaths = ["$"],
onExpandedChange,
defaultExpandedDepth = 1,
maxDepth = 32,
sortKeys = true,
redactKeys = /password|passphrase|secret|token|private[-_]?key|api[-_]?key/i,
height = 15,
width = 100,
staticLimit = 2_000,
autoFocus,
slots,
slotProps,
disabled = false,
readOnly = false,
...props
}: JsonViewerProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
value | unknown | Yes | The value member uses the unknown contract. | — |
expandedPaths | readonly string[] | undefined | No | The expandedPaths member uses the readonly string[] | undefined contract. | — |
defaultExpandedPaths | readonly string[] | undefined | No | The defaultExpandedPaths member uses the readonly string[] | undefined contract. | — |
onExpandedChange | ((paths: readonly string[]) => void | Promise<void>) | undefined | No | The onExpandedChange member uses the ((paths: readonly string[]) => void | Promise<void>) | undefined contract. | — |
defaultExpandedDepth | number | undefined | No | The defaultExpandedDepth member uses the number | undefined contract. | — |
maxDepth | number | undefined | No | The maxDepth member uses the number | undefined contract. | — |
sortKeys | boolean | undefined | No | The sortKeys member uses the boolean | undefined contract. | — |
redactKeys | RegExp | undefined | No | The redactKeys member uses the RegExp | undefined contract. | — |
height | number | undefined | No | The height member uses the number | undefined contract. | — |
width | number | undefined | No | The width member uses the number | undefined contract. | — |
staticLimit | number | undefined | No | The staticLimit member uses the number | undefined contract. | — |
autoFocus | boolean | undefined | No | The autoFocus member uses the boolean | undefined contract. | — |
variant | string | undefined | No | The variant member uses the string | undefined contract. | — |
size | "sm" | "md" | "lg" | undefined | No | The size member uses the "sm" | "md" | "lg" | undefined contract. | — |
unstyled | boolean | undefined | No | The unstyled member uses the boolean | undefined contract. | — |
className | string | undefined | No | The className member uses the string | undefined contract. | — |
layout | Partial<Omit<LayoutNodeInput, "children" | "id" | "semantics">> | undefined | No | The layout member uses the Partial<Omit<LayoutNodeInput, "children" | "id" | "semantics">> | undefined contract. | — |
id | string | undefined | No | The id member uses the string | undefined contract. | — |
testId | string | undefined | No | The testId member uses the string | undefined contract. | — |
role | SemanticRole | undefined | No | The role member uses the SemanticRole | undefined contract. | SemanticRole |
label | string | undefined | No | The label member uses the string | undefined contract. | — |
description | string | undefined | No | The description member uses the string | undefined contract. | — |
disabled | boolean | undefined | No | The disabled member uses the boolean | undefined contract. | — |
readOnly | boolean | undefined | No | The readOnly member uses the boolean | undefined contract. | — |
selected | boolean | undefined | No | The selected member uses the boolean | undefined contract. | — |
checked | boolean | undefined | No | The checked member uses the boolean | undefined contract. | — |
expanded | boolean | undefined | No | The expanded member uses the boolean | undefined contract. | — |
valueText | string | undefined | No | The valueText member uses the string | undefined contract. | — |
slots | Partial<SlotComponents<{ root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; }>> | undefined | No | The slots member uses the Partial<SlotComponents<{ root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; }>> | undefined contract. | BoxProps, SlotComponents, TextProps |
slotProps | Partial<SlotProps<{ root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; }, { readonly focused: boolean; readonly activePath?: string; readonly expanded: ReadonlySet<string>; }>> | undefined | No | The slotProps member uses the Partial<SlotProps<{ root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; }, { readonly focused: boolean; readonly activePath?: string; readonly expanded: ReadonlySet<string>; }>> | undefined contract. | BoxProps, SlotProps, TextProps |
LogViewer reports follow state; JSON expansion can be controlled; pure transformation helpers emit nothing.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
Viewers scroll and filter; JSON nodes expand or collapse; diff output remains deterministic in static mode.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { JsonViewer } from "@/components/tuil/data-display/log-viewer";