Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
CodeMirror-backed editor with syntax highlighting, line numbers, and Opus theme integration. The editor follows the active Opus light or dark theme automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | required | Controlled editor value. |
onChange | (value: string) => void | — | Called whenever the document changes. |
language | "javascript" | "jsx" | "tsx" | "typescript" | "text" | "tsx" | Syntax mode. |
height | number | string | 260 | Fixed editor height. |
readOnly | boolean | false | Prevents editing while keeping selection and copy. |
showLineNumbers | boolean | true | Shows the line-number gutter. |
ariaLabel | string | "Code editor" | Accessible name for the editor. |
ariaLabel.