# RichDiffViewer

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

RichDiffViewer 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 RichDiffViewer(props: {
  readonly source: string;
  readonly mode?: "unified" | "split";
  readonly id?: string;
  readonly label?: string;
  readonly autoFocus?: boolean;
  readonly search?: string | RegExp;
  readonly collapseUnchangedAfter?: number;
  readonly onResolveHunk?: (
    index: number,
    decision: "apply" | "reject",
    content: string,
  ) => void | Promise<void>;
}): ReactNode;
```

### Props, functions, and events [#props-functions-and-events]

This declaration has no public members.

`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 { RichDiffViewer } from "@/components/tuil/data-display/log-viewer";
```