# CodeEditor

Source: https://payloadcms.com/docs/ui-components/code-editor

The `CodeEditor` component wraps Monaco Editor with Payload's styling and automatic height behavior.

## Import

`CodeEditor` loads Monaco eagerly. Use `CodeEditorLazy` to defer loading the editor until it renders, which keeps Monaco out of the initial bundle of a Client Component.

```tsx
import { CodeEditor, CodeEditorLazy } from '@payloadcms/ui'
```

## Read-only usage

**Implementation**

```tsx
<CodeEditor
  defaultLanguage="json"
  minHeight={110}
  readOnly
  value={'{\n  "title": "Payload UI",\n  "enabled": true\n}'}
/>
```

**Styling**

Style the CodeEditor frame directly. Monaco exposes its own variables for editor-specific colors.

```css
.code-editor {
  border: 1px solid #c8c0ff;
  border-radius: 8px;
  overflow: hidden;
}

.code-editor .monaco-editor {
  --vscode-editor-background: #151225;
}
```

- `--vscode-editor-background`: Monaco editor surface.
- `border`: Outer editor border.
- `border-radius`: Outer editor corner radius.

Set `defaultLanguage` to enable the appropriate syntax highlighting. Use `readOnly` when displaying code that should not be edited.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop                   | Type                       | Default | Description                                     |
| ---------------------- | -------------------------- | ------- | ----------------------------------------------- |
| `value`                | `string`                   | —       | Code displayed by the editor.                   |
| `defaultLanguage`      | `string`                   | —       | Sets the Monaco language used for highlighting. |
| `onChange`             | `(value?: string) => void` | —       | Runs when editable content changes.             |
| `readOnly`             | `boolean`                  | `false` | Prevents editing.                               |
| `minHeight`            | `number`                   | `56`    | Sets the minimum editor height in pixels.       |
| `maxHeight`            | `number`                   | —       | Caps the automatically calculated height.       |
| `options`              | `MonacoEditorOptions`      | —       | Overrides supported Monaco Editor options.      |
| `recalculatedHeightAt` | `number`                   | —       | Triggers height recalculation when increased.   |