CodeEditor renders a Monaco editor that follows the Twenty theme in light and dark mode. CodeEditorHeader adds a bar above it for a title, tabs, or actions. Both come from twenty-ui/components/code-editor, a separate entry point, so the rest of Twenty UI works without Monaco.
Setup
Install the editor’s optional peer dependencies:monaco-editor package rather than a copy from a CDN. Monaco runs language features such as validation and autocompletion in web workers, and creating those workers depends on your bundler. Before an editor mounts, define MonacoEnvironment.getWorker as described in Monaco’s ESM integration guide. Without it, the editor still renders, but language features are unavailable.
The code editor does not run inside front components yet.
Usage
onChange receives the full content on every change. A loader shows until Monaco has loaded. Set isLoading to keep showing it while your own data loads.
Add a header
variant="with-header" removes the editor’s top border so it joins the header. Use borderless when the editor sits inside a surface that already has a border.
Size and appearance
The editor is 450px tall by default. Setheight to a number of pixels or a CSS length. autoHeight grows the editor with its content, and resizable adds a handle below it to drag the height. When both are set, resizable applies.
contentPadding="comfortable" widens the gap between line numbers and code. transparentBackground lets the surrounding surface show through.
Validation
Monaco reports its own diagnostics, such as JSON syntax errors, throughonValidate. To add your own, return marker data from setMarkers. It runs when the editor mounts and after every change, and replaces the markers it set before.
Keyboard
While the editor has focus, it stops keyboard events from propagating. React key handlers on parent components and document-level shortcuts do not receive keystrokes typed in the editor.Props
CodeEditor
boolean
default:"false"
Grows the editor to fit its content instead of using
height. Ignored when resizable is set."default" | "comfortable"
default:"default"
default pads the top and bottom of the content. comfortable also widens the gap between line numbers and code.string | number
default:"450"
Editor height in pixels or as a CSS length. With
resizable, a numeric height sets the initial height.boolean
default:"false"
Shows a loader at the editor height instead of the editor. A loader also shows while Monaco loads.
string
Monaco language identifier for highlighting and language services, such as
json or typescript.((value: string) => void)
Called with the full content whenever it changes.
OnMount
Called when the editor is ready, with the editor instance and the Monaco namespace. The Twenty theme is already applied.
OnValidate
Called with the markers Monaco reports after validating the content, such as JSON syntax errors.
IStandaloneEditorConstructionOptions
Monaco editor options merged over the Twenty defaults.
padding is ignored; use contentPadding instead.boolean
default:"false"
Adds a handle below the editor to drag its height.
((value: string) => IMarkerData[])
Returns custom validation markers for the content. Runs when the editor mounts and after every change, replacing the previous custom markers.
boolean
Removes the editor background so the surrounding surface shows through.
string
Content of the editor. Pair it with
onChange to control the editor."default" | "with-header" | "borderless"
default:"default"
Border treatment:
default draws a rounded border, with-header attaches the editor below a CodeEditorHeader, and borderless removes the border.CodeEditorHeader
ReactNode[]
Elements shown at the start of the header, such as tabs.
ReactNode[]
Elements shown at the end of the header, such as actions.
string
Text shown at the start of the header, after
leftNodes.