API Reference

Complete reference for the EditorAPI object returned by createEditor().

Method Summary

Signature	Returns	Description
`getValue()`	`string`	Return the full document text.
`setValue(value: string)`	`void`	Replace all content.
`insertText(text: string)`	`void`	Insert text at the cursor.
`getCursor()`	`CursorPosition`	Return { line, column } (zero-based).
`setCursor(pos: CursorPosition)`	`void`	Move cursor to position.
`getSelection()`	`Selection \| null`	Return selection or null.
`setSelection(sel: Selection)`	`void`	Programmatically set the selection range.
`undo()`	`void`	Undo the last change.
`redo()`	`void`	Redo the undone change.
`executeCommand(name: string)`	`void`	Run a built-in editor command.
`setTheme(id: string)`	`void`	Switch the active theme.
`getThemes()`	`string[]`	List all registered theme IDs.
`registerTheme(def: ThemeDefinition)`	`void`	Register a custom theme globally.
`updateConfig(patch: Partial<EditorConfig>)`	`void`	Apply a partial config update.
`destroy()`	`void`	Tear down the editor and free all resources.

Creating an Editor

create.ts

import { createEditor, type EditorConfig, type EditorAPI } from '@synclineapi/editor';

const container = document.getElementById('editor')!;

const editor: EditorAPI = createEditor(container, {
  language: 'typescript',
  theme: 'vr-dark',
  showMinimap: true,
  onChange: (value) => console.log('changed', value.length),
});

Content

content.ts

// Get the full document text
const code: string = editor.getValue();

// Replace all content (adds one undo record)
editor.setValue('console.log("hello");');

// Insert at the current cursor position
editor.insertText('// inserted text\n');

Cursor & Selection

cursor.ts

import { type CursorPosition, type Selection } from '@synclineapi/editor';

// Read cursor
const pos: CursorPosition = editor.getCursor();
// { line: 0, column: 10 }  (zero-based)

// Move cursor
editor.setCursor({ line: 5, column: 0 });

// Read selection
const sel: Selection | null = editor.getSelection();
// { anchor: { line, column }, head: { line, column }, text: '...' }

// Set selection
editor.setSelection({ anchor: { line: 0, column: 0 }, head: { line: 0, column: 5 } });

History (Undo / Redo)

history.ts

// Undo the last change
editor.undo();

// Redo the undone change
editor.redo();

Commands

Execute any built-in command by name via executeCommand(). All commands are also bound to keyboard shortcuts (see Keyboard Shortcuts).

commands.ts

// Execute any built-in command by name
editor.executeCommand('toggleComment');
editor.executeCommand('duplicateLine');
editor.executeCommand('find');
editor.executeCommand('findReplace');
editor.executeCommand('indentLine');
editor.executeCommand('outdentLine');
editor.executeCommand('selectAll');
editor.executeCommand('toggleWordWrap');
editor.executeCommand('deleteLine');
editor.executeCommand('undo');
editor.executeCommand('redo');
editor.executeCommand('copy');
editor.executeCommand('cut');
editor.executeCommand('paste');

Command	Description
`undo`	Undo last change.
`redo`	Redo undone change.
`selectAll`	Select all content.
`copy`	Copy selection to clipboard.
`cut`	Cut selection to clipboard.
`paste`	Paste from clipboard.
`toggleComment`	Toggle line comment (Ctrl+/).
`duplicateLine`	Duplicate the current line.
`deleteLine`	Delete the current line.
`indentLine`	Indent current line / selection by one level.
`outdentLine`	Outdent current line / selection by one level.
`toggleWordWrap`	Toggle soft word-wrap (Alt+Z).
`find`	Open find bar (Ctrl+F).
`findReplace`	Open find-and-replace (Ctrl+H).

Theme API

theme-api.ts

// Switch to a built-in or previously registered theme
editor.setTheme('monokai');

// List all available theme IDs
const themes: string[] = editor.getThemes();

// Register a custom theme (see Themes docs for ThemeDefinition shape)
editor.registerTheme({ id: 'my-theme', /* ... */ });

Config Updates

update-config.ts

// Apply a partial config patch — unchanged fields stay the same
editor.updateConfig({ wordWrap: true, fontSize: 14 });

// Dynamically replace completions
editor.updateConfig({
  completions: newItems,
  provideCompletions: myCallback,
});

Destroy

Call destroy() when unmounting — it removes all DOM nodes, cancels animation frames, and frees web worker resources:

destroy.ts

// Tear down the editor: removes DOM, cancels timers, frees workers
editor.destroy();

// The container element is left in place — you can call createEditor()
// again on the same element.

Autocomplete

Keyboard Shortcuts

Docs Playground npm