CodeEditor

The CodeEditor provides a text input field that is specifically designed for editing code. It further offers properties to configure e.g. syntax highlighting, spell checks or line wrapping. Once the editor is focused via the keyboard, the user must press "Enter" to start editing and "Escape" to quit editing and return to the keyboard navigation flow.

OverviewPropertiesUsage

Import

import { CodeEditor } from '@dynatrace/strato-components/editors';

Demo

By default, the CodeEditor is uncontrolled and manages its own internal state. To pre-fill the editor with an initial value, use the defaultValue prop.

Set language

To enable syntax highlighting, specify the desired language with the language property.

Disable editing

To disable editing of the content, use the readOnly property.

Enable line wrap

To enable line wrap as soon as the content overflows, use the lineWrap property.

Expand to full height

To expand the CodeEditor to the full available height of its parent, use the fullHeight property. If you want the CodeEditor to respect the min-height and max-height of the parent, use a flex container.

Folding

The CodeEditor supports folding of code blocks such as functions, objects, and comments. Blocks are detected automatically based on the syntax of the selected language. Folding can be triggered via the gutter icons or keyboard shortcuts:

• Fold the current code block: Ctrl+Shift+[ (Windows/Linux) / Cmd+Option+[ (macOS).
• Unfold the current code block: Ctrl+Shift+] (Windows/Linux) / Cmd+Option+] (macOS).
• Fold all: Ctrl+Alt+[ (Windows/Linux) / Control+Option+[ (macOS).
• Unfold all: Ctrl+Alt+] (Windows/Linux) / Control+Option+] (macOS).

Controlled

To control which blocks are folded from outside the CodeEditor, pass an array of character start positions to the folding prop.

The onFoldingChange callback is called whenever the folding state changes — for example, when the user folds or unfolds a block via the gutter or keyboard shortcut. It receives the updated array of folded character positions and is typically paired with the folding prop to keep the external state in sync.

Uncontrolled

For uncontrolled scenarios where the parent doesn't need to track fold positions, use defaultFolding to set the initial folds without managing state externally.

Change size

The CodeEditor component offers a size prop with default and condensed options. The condensed option enables a more compact code display by optimizing space, while the prop defaults to default for a regular view.

Validate JSON

When language="json" is set, the CodeEditor automatically runs a JSON linter. Syntax errors are marked in the editor, and a hover tooltip explains each issue. No additional configuration is needed.

Show inline diagnostics

Use the diagnostics prop to attach per-range validation feedback from any source. Each entry specifies a character range or position, a message, and an optional severity ('error', 'warning', or 'info'). Passing diagnostics also disables the built-in JSON linter so you have full control over what is shown.

Note

Keep the diagnostics array referentially stable by storing it in state or wrapping it in useMemo. A new array reference on every render causes the editor to redispatch diagnostics unnecessarily.

Validate with a server

Combine diagnostics with a debounced useEffect and AbortController to run server-side validation. The abort controller cancels any in-flight request when a new keystroke arrives before the previous response has been applied.

Control state

The CodeEditor also supports controlled behavior, enabling direct management of its state. To do so, pass a handler to onChange and assign the updated value via the value prop.

Caution

isControlled is deprecated and will be removed in a future major version when the true uncontrolled and controlled behaviors become the default. Adopting it now lets you opt in early and try it out.

Set isControlled to make the CodeEditor strictly reflect its value prop. User input is not applied to the editor directly. Instead, every change calls onChange with the new value, and the editor only updates when value changes. This ensures the displayed content always matches the state you control.