CodeEditor

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.

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

Read-only usage

Loading component example…

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.

Was this page helpful?

See what others are building with Payload.

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Get the resources you need to start building today

Microsoft chose Payload to tell the world about AI.

CodeEditor

Import

Read-only usage

Common props

Collapsible