# CodeViewer

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

CodeViewer 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 CodeViewer(props: CodeViewerProps): ReactNode;
```

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

| Member                 | Type                                                                      | Required | Description                                                                                                         | Related types                                               |
| ---------------------- | ------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `source`               | `string`                                                                  | Yes      | The `source` member uses the `string` contract.                                                                     | —                                                           |
| `language`             | `string \| undefined`                                                     | No       | The `language` member uses the `string \| undefined` contract.                                                      | —                                                           |
| `width`                | `number \| undefined`                                                     | No       | The `width` member uses the `number \| undefined` contract.                                                         | —                                                           |
| `lineNumbers`          | `boolean \| undefined`                                                    | No       | The `lineNumbers` member uses the `boolean \| undefined` contract.                                                  | —                                                           |
| `theme`                | `CodeTheme \| undefined`                                                  | No       | The `theme` member uses the `CodeTheme \| undefined` contract.                                                      | [`CodeTheme`](/tuil/docs/reference/packages/code/api/code-theme) |
| `id`                   | `string \| undefined`                                                     | No       | The `id` member uses the `string \| undefined` contract.                                                            | —                                                           |
| `label`                | `string \| undefined`                                                     | No       | The `label` member uses the `string \| undefined` contract.                                                         | —                                                           |
| `autoFocus`            | `boolean \| undefined`                                                    | No       | The `autoFocus` member uses the `boolean \| undefined` contract.                                                    | —                                                           |
| `wrap`                 | `boolean \| undefined`                                                    | No       | The `wrap` member uses the `boolean \| undefined` contract.                                                         | —                                                           |
| `horizontalOffset`     | `number \| undefined`                                                     | No       | The `horizontalOffset` member uses the `number \| undefined` contract.                                              | —                                                           |
| `foldedLines`          | `ReadonlySet<number> \| undefined`                                        | No       | The `foldedLines` member uses the `ReadonlySet<number> \| undefined` contract.                                      | —                                                           |
| `search`               | `string \| RegExp \| undefined`                                           | No       | The `search` member uses the `string \| RegExp \| undefined` contract.                                              | —                                                           |
| `clipboard`            | `&#123; write(value: string): void \| Promise<void>; &#125; \| undefined` | No       | The `clipboard` member uses the `&#123; write(value: string): void \| Promise<void>; &#125; \| undefined` contract. | —                                                           |
| `onCopy`               | `((value: string) => void \| Promise<void>) \| undefined`                 | No       | The `onCopy` member uses the `((value: string) => void \| Promise<void>) \| undefined` contract.                    | —                                                           |
| `selectedLine`         | `number \| undefined`                                                     | No       | The `selectedLine` member uses the `number \| undefined` contract.                                                  | —                                                           |
| `onSelectedLineChange` | `((line: number) => void \| Promise<void>) \| undefined`                  | No       | The `onSelectedLineChange` member uses the `((line: number) => void \| Promise<void>) \| undefined` contract.       | —                                                           |

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