Configuration

Full reference for every option accepted by createEditor(). Every field is optional — sensible defaults are applied for all options.

All options can also be updated at runtime via editor.updateConfig(patch) — no page reload required.

Updating at Runtime

Any option can be changed after creation. Config changes are applied incrementally — only the affected subsystems are rebuilt:

runtime-config.ts

// Toggle features after creation — no reload needed
editor.updateConfig({ wordWrap: true, showMinimap: false });

// Switch language (rebuilds highlighting + completions)
editor.updateConfig({ language: 'css' });

// Change font
editor.updateConfig({
  fontFamily: "'Fira Code', monospace",
  fontSize: 14,
  lineHeight: 24,
});

// Enter read-only mode
editor.updateConfig({ readOnly: true });

// Override token colours on top of the current theme
editor.updateConfig({
  tokenColors: { keyword: '#ff79c6', string: '#f1fa8c' },
});

Document

Option	Type	Default	Description
`value`	`string \| string[]`	`''`	Initial document content. String or pre-split string[].
`language`	`Language`	`'typescript'`	Syntax highlighting language. Values: 'typescript' \| 'javascript' \| 'css' \| 'json' \| 'markdown'.

Display

Option	Type	Default	Description
`showGutter`	`boolean`	`true`	Show/hide the line-number gutter.
`showMinimap`	`boolean`	`true`	Show/hide the canvas minimap panel.
`showStatusBar`	`boolean`	`true`	Show/hide the bottom status bar.
`showIndentGuides`	`boolean`	`true`	Faint vertical lines at each indentation level.
`highlightActiveLine`	`boolean`	`true`	Background tint on the active line and gutter cell.
`wordHighlight`	`boolean`	`true`	Highlight all other occurrences of the word under the cursor.
`renderWhitespace`	`'none' \| 'boundary' \| 'all'`	`'none'`	Spaces render as ·, tabs as →. 'boundary' = leading/trailing only.

Typography

Option	Type	Default	Description
`fontFamily`	`string`	`'JetBrains Mono', monospace`	CSS font-family for all code text.
`fontSize`	`number`	`13`	Font size in pixels.
`lineHeight`	`number`	`22`	Row height in pixels. All scroll and minimap calculations derive from this.

Cursor

Option	Type	Default	Description
`cursorStyle`	`'line' \| 'block' \| 'underline'`	`'line'`	Visual cursor shape.
`cursorBlinkRate`	`number`	`1050`	Blink period in ms. Set to 999999 to disable blinking.

Layout

Option	Type	Default	Description
`gutterWidth`	`number`	`60`	Gutter width in pixels.
`minimapWidth`	`number`	`120`	Minimap panel width in pixels.
`wordWrap`	`boolean`	`false`	Soft-wrap long lines. Toggle at runtime with Alt+Z.
`wrapColumn`	`number`	`80`	Column at which soft-wrap breaks when wordWrap is true.

Editing

Option	Type	Default	Description
`tabSize`	`number`	`2`	Spaces per Tab press.
`insertSpaces`	`boolean`	`true`	Insert spaces on Tab; false inserts a literal tab character.
`maxUndoHistory`	`number`	`300`	Maximum undo snapshots retained.
`undoBatchMs`	`number`	`700`	Keystrokes within this window are grouped into one undo step. 0 = per-keystroke.
`readOnly`	`boolean`	`false`	Block all edits. Navigation, selection, and copy still work.
`autoClosePairs`	`Record<string,string>`	`{ '(':')', '[':']', ... }`	Characters that auto-close. Pass {} to disable entirely.
`lineCommentToken`	`string`	`''`	Prefix for Ctrl+/ toggle comment. Auto-detects from language when empty.
`wordSeparators`	`string`	`''`	Extra characters treated as word boundaries for double-click and Ctrl+←/→.

Features

Option	Type	Default	Description
`bracketMatching`	`boolean`	`true`	Highlight matching ()[] {} pair at the cursor.
`codeFolding`	`boolean`	`true`	Gutter fold button for collapsible {} blocks.
`emmet`	`boolean`	`true`	Emmet abbreviation expansion via Tab.
`snippetExpansion`	`boolean`	`true`	Tab-expand built-in and custom snippets.
`autocomplete`	`boolean`	`true`	Show the autocomplete popup while typing.
`autocompletePrefixLength`	`number`	`2`	Minimum characters typed before the popup appears.
`multiCursor`	`boolean`	`true`	Alt+Click and Ctrl+D multi-cursor.
`find`	`boolean`	`true`	Enable the find bar (Ctrl+F).
`findReplace`	`boolean`	`true`	Enable find-and-replace (Ctrl+H).
`hover`	`boolean`	`true`	Show a documentation tooltip when the pointer rests on a known identifier.
`wordSelection`	`boolean`	`true`	Double-click selects the word under the cursor.

Autocomplete & Syntax

Option	Type	Default	Description
`extraKeywords`	`string[]`	`[]`	Words highlighted as keywords and added to autocomplete.
`extraTypes`	`string[]`	`[]`	Words highlighted as types and added to autocomplete.
`completions`	`CompletionItem[]`	`[]`	Unified completions array — symbols, snippets, DSL items.
`replaceBuiltins`	`boolean`	`false`	When true, completions replaces the built-in language keywords/types entirely.
`provideCompletions`	`(ctx) => CompletionItem[] \| null`	`undefined`	Dynamic callback — called on every popup open.
`provideHover`	`(ctx) => HoverDoc \| null`	`undefined`	Dynamic hover callback for custom identifier docs.
`maxCompletions`	`number`	`14`	Maximum items shown in the autocomplete popup.

Theme & Token Colors

Option	Type	Default	Description
`theme`	`string \| ThemeDefinition`	`'' (VR Dark)`	Built-in theme ID or a full ThemeDefinition object.
`tokenColors`	`TokenColors`	`{}`	Per-token colour overrides layered on top of the active theme.

Callbacks

Option	Type	Default	Description
`onChange`	`(value: string) => void`	`undefined`	Fired after every content change (keystroke, paste, undo, setValue).
`onCursorChange`	`(pos: CursorPosition) => void`	`undefined`	Fired when the cursor moves.
`onSelectionChange`	`(sel: Selection \| null) => void`	`undefined`	Fired when the selection changes or clears.
`onFocus`	`() => void`	`undefined`	Fired when the editor gains keyboard focus.
`onBlur`	`() => void`	`undefined`	Fired when the editor loses keyboard focus.

Getting Started

Themes

Docs Playground npm