# MarkdownViewer

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

MarkdownViewer 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 MarkdownViewer({
  source,
  width = 80,
  ...props
}: MarkdownViewerProps): 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.                                                                 | —                                                                      |
| `width`                 | `number \| undefined`                                             | No       | The `width` member uses the `number \| undefined` contract.                                                     | —                                                                      |
| `selectable`            | `boolean \| undefined`                                            | No       | The `selectable` member uses the `boolean \| undefined` contract.                                               | —                                                                      |
| `selectedBlock`         | `number \| undefined`                                             | No       | The `selectedBlock` member uses the `number \| undefined` contract.                                             | —                                                                      |
| `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.                                                | —                                                                      |
| `onSelectedBlockChange` | `((index: number) => void \| Promise<void>) \| undefined`         | No       | The `onSelectedBlockChange` member uses the `((index: number) => void \| Promise<void>) \| undefined` contract. | —                                                                      |
| `renderBlock`           | `((node: DocumentNode, index: number) => ReactNode) \| undefined` | No       | The `renderBlock` member uses the `((node: DocumentNode, index: number) => ReactNode) \| undefined` contract.   | [`DocumentNode`](/tuil/docs/reference/packages/streaming/api/document-node) |

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