# CodeViewerProps

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

CodeViewerProps component contract.



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

## Type [#type]

```ts
export interface CodeViewerProps {
  readonly source: string;
  readonly language?: string;
  readonly width?: number;
  readonly lineNumbers?: boolean;
  readonly theme?: CodeTheme;
  readonly id?: string;
  readonly label?: string;
  readonly autoFocus?: boolean;
  readonly wrap?: boolean;
  readonly horizontalOffset?: number;
  readonly foldedLines?: ReadonlySet<number>;
  readonly search?: string | RegExp;
  readonly clipboard?: {
    write(value: string): void | Promise<void>;
  };
  readonly onCopy?: (value: string) => void | Promise<void>;
  readonly selectedLine?: number;
  readonly onSelectedLineChange?: (line: number) => void | Promise<void>;
}
```

## Members [#members]

| 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.       | —                                                           |

## Source [#source]

[View the secondary source reference](https://github.com/mwillbanks/tuil/blob/main/registry/data-display/rich-content.tsx)