# JsonViewer

Source: /tuil/docs/reference/components/structured-viewers/json-viewer
Locale: en

JsonViewer component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="LogViewer" />

## API and events [#api-and-events]

Inspect streaming logs, expandable structured values, and line-oriented changes in terminal-bounded viewports.

```tsx
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 [#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`](/tuil/docs/reference/packages/core/api/semantic-role)                                                                                                                            |
| `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<&#123; root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; &#125;>> \| undefined`                                                                                                            | No       | The `slots` member uses the `Partial<SlotComponents<&#123; root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; &#125;>> \| undefined` contract.                                                                                                                | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) |
| `slotProps`            | `Partial<SlotProps<&#123; root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; &#125;, &#123; readonly focused: boolean; readonly activePath?: string; readonly expanded: ReadonlySet<string>; &#125;>> \| undefined` | No       | The `slotProps` member uses the `Partial<SlotProps<&#123; root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; empty: import("ink").TextProps; overflow: import("ink").TextProps; &#125;, &#123; readonly focused: boolean; readonly activePath?: string; readonly expanded: ReadonlySet<string>; &#125;>> \| undefined` contract. | [`BoxProps`](/tuil/docs/reference/packages/ink/api/box-props), [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props)           |

`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 [#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 [#complete-import]

```tsx
import { JsonViewer } from "@/components/tuil/data-display/log-viewer";
```