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 });

// Lock specific line ranges (0-based) while keeping the rest editable
editor.updateConfig({
  readOnlyRanges: [
    { start: 0, end: 4  },  // lines 1–5 locked
    { start: 20, end: 25 }, // lines 21–26 locked
  ],
});

// Unlock everything
editor.updateConfig({ readOnlyRanges: [] });

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

// Restore all token colours to theme defaults
editor.updateConfig({ tokenColors: {} });

// Swap completions at runtime
editor.updateConfig({ completions: newCompletions });

Document

Option	Type	Default	Description
`value`	`string \| string[]`	`''`	Initial document content. String or pre-split string[].
`language`	`Language`	`'typescript'`	Syntax highlighting and autocomplete language. 17 built-ins: 'typescript' \| 'javascript' \| 'python' \| 'java' \| 'c' \| 'cpp' \| 'csharp' \| 'go' \| 'rust' \| 'ruby' \| 'php' \| 'swift' \| 'css' \| 'sql' \| 'json' \| 'markdown' \| 'text'.

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.
`readOnlyRanges`	`ReadOnlyRange[]`	`[]`	Lock specific line ranges (0-based, inclusive). Edits, autocomplete, and snippets are blocked inside these ranges; hover, selection, and copy still work. Hovering a locked block reveals inline insert-line controls at its boundaries.
`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.
`goToLine`	`boolean`	`false`	Enable the Go to Line bar (Ctrl+G / Cmd+G). Opens a centred prompt; Enter jumps the cursor, Escape dismisses.
`placeholder`	`string`	`''`	Ghost hint text shown in the editor when the document is completely empty. Hidden as soon as any content is present.

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.
`provideTokens`	`(line: string, language: string) => TokenSegment[]`	`undefined`	Fully override syntax tokenisation. Called for every visible line on every render. When set, the built-in tokeniser is never called.
`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.

Token Colors Quick Reference

Each field maps to a CSS variable and controls one token category. Set a value to override; set to '' (empty string) to restore the theme default for that token.

Field	CSS Variable	Highlights
`keyword`	`--sl-keyword`	Keywords (if, for, return, …)
`string`	`--sl-string`	String literals
`comment`	`--sl-comment`	Line and block comments
`function`	`--sl-function`	Function / method names
`number`	`--sl-number`	Numeric literals
`class`	`--sl-class`	Class names
`operator`	`--sl-operator`	Operators (+, ===, =>, …)
`type`	`--sl-type`	Type annotations
`decorator`	`--sl-decorator`	Decorators (@Component, …)

token-colors.ts

// Override specific tokens — all others stay from the active theme
editor.updateConfig({
  tokenColors: {
    keyword:   '#ff79c6',  // pink keywords
    string:    '#f1fa8c',  // yellow strings
    comment:   '#6272a4',  // muted blue comments
    function:  '#50fa7b',  // green functions
    number:    '#bd93f9',  // purple numbers
    class:     '#8be9fd',  // cyan class names
    operator:  '#f8f8f2',  // near-white operators
    type:      '#8be9fd',  // cyan types
    decorator: '#ffb86c',  // orange decorators
  },
});

// Restore everything to the current theme's defaults
editor.updateConfig({ tokenColors: {} });

// Remove just one override and keep the rest
editor.updateConfig({
  tokenColors: { ...currentOverrides, keyword: '' },
});

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