CodeEditor·component·@astryxdesign/labExperimental

Code Editor

Editable code component with real-time syntax highlighting using the CSS Custom Highlight API. Supports line numbers, read-only state, placeholder text, and custom tokenizers.

@astryxdesign/lab

Usage

Editable code component with real-time syntax highlighting using the CSS Custom Highlight API. Supports line numbers, read-only state, placeholder text, and custom tokenizers.

Typed props

Prop	Type and behavior
`value`	`string` · required Controlled string value for the editor.
`onChange`	`(value: string) => void` · required Callback fired when the code content changes.
`label`	`string` · required Accessible label for the editable region (aria-label).
`language`	`string` · default 'plaintext' Programming language for syntax highlighting.
`hasLineNumbers`	`boolean` · default false Display line number gutter on the left.
`isReadOnly`	`boolean` · default false Renders the editor in a read-only state.
`placeholder`	`string` Placeholder text displayed when value is empty.
`maxHeight`	`number \| string` Maximum container height before internal scrolling.
`size`	`'sm' \| 'md'` · default 'md' Font size variant for the code text.
`tokenizer`	`(code: string, language: string) => TokenLine[]` Custom tokenizer function override for language parsing.
`xstyle`	`StyleXStyles` StyleX styles for layout customization.