Syncline EditorSyncline Editor
FeaturesThemesDocsPlayground
Get started

Languages

Syncline ships 17 built-in language definitions. Each is a self-contained object that bundles keywords, types, comment tokens, auto-close pairs, file extensions, and a starter set of completions.

Supported Languages

language idNameExtensionsSnippetsComment token
'typescript'

TypeScript

ts, tsx

9

//
'javascript'

JavaScript

js, mjs, cjs

8

//
'python'

Python

py

10

#
'java'

Java

java

10

//
'c'

C

c, h

9

//
'cpp'

C++

cpp, cc, cxx, hpp

11

//
'csharp'

C#

cs

9

//
'go'

Go

go

7

//
'rust'

Rust

rs

8

//
'ruby'

Ruby

rb

4

#
'php'

PHP

php

4

//
'swift'

Swift

swift

9

//
'css'

CSS

css

4

/* */
'sql'

SQL

sql

4

--
'json'

JSON

json

2

—
'markdown'

Markdown

md, mdx

—

—
'text'

Plain Text

txt

—

—

Applying a Language

Spread .config() into createEditor() or updateConfig() to apply a language. The config patch sets language, lineCommentToken, autoClosePairs, and the default completionsin one call:

apply-language.ts

import { createEditor, python, java, cpp } from '@synclineapi/editor';

// Apply a language on creation — spread .config() into your editor config
const editor = createEditor(container, {
  ...python.config(),
  value: myPythonCode,
});

// Switch language at runtime — rebuilds highlighting and completions instantly
editor.updateConfig(java.config());
editor.updateConfig(cpp.config());

Built-in Language Objects

All 17 language objects are exported from the package root:

language-imports.ts

import {
  typescript, javascript, python,
  java, c, cpp, csharp, go, rust, ruby, php, swift,
  css, sql, json, markdown,
} from '@synclineapi/editor';

LANGUAGES Map & Dynamic Lookup

Use LANGUAGES, getLanguage(id), and getLanguageByExtension(ext) when you need to resolve a language at runtime — for example from a filename or a user preference:

language-lookup.ts

import { LANGUAGES, getLanguage, getLanguageByExtension } from '@synclineapi/editor';

// Lookup by language ID
const lang = getLanguage('python');              // LanguageDefinition | undefined
if (lang) editor.updateConfig(lang.config());

// Lookup by file extension (without the dot)
const lang2 = getLanguageByExtension('rs');      // → rust LanguageDefinition
editor.updateConfig(lang2?.config() ?? { language: 'text' });

// All registered languages
const all = Object.values(LANGUAGES);            // LanguageDefinition[]
console.log(all.map((l) => l.id));
// ['typescript', 'javascript', 'python', 'java', 'c', 'cpp', 'csharp', 'go',
//  'rust', 'ruby', 'php', 'swift', 'css', 'sql', 'json', 'markdown', 'text']

LanguageDefinition Fields

FieldTypeDescription
idstring

Language identifier — matches a value in the Language union (e.g. 'python').

namestring

Human-readable display name (e.g. 'Python', 'C++').

fileExtensionsstring[]

File extensions without the dot (e.g. ['ts', 'tsx']).

lineCommentTokenstring

Line-comment prefix used by Ctrl+/ (e.g. '//', '#', '--').

blockComment{ open: string; close: string } | undefined

Block comment delimiters, or undefined when unsupported.

keywordsReadonlySet<string>

Full keyword set used by the tokeniser.

typesReadonlySet<string>

Full built-in type set used by the tokeniser.

autoClosePairsRecord<string, string>

Auto-close character pairs for this language.

skipCloseCharsReadonlySet<string>

Closing characters to skip over instead of insert.

completionsCompletionItem[]

Default completions bundled with this language.

config()() => Partial<EditorConfig>

Returns a config patch that fully activates this language — spread into createEditor() or updateConfig().

Extending a Built-in Language

Spread .config() and override or augment any field. Use language.completions to keep all built-in completions and add your own on top:

extend-language.ts

import { typescript } from '@synclineapi/editor';

// Spread .config() to inherit all language defaults, then override or augment
editor.updateConfig({
  ...typescript.config(),
  extraKeywords: ['pipeline', 'stage', 'emit'],
  extraTypes:    ['Observable', 'Subject', 'BehaviorSubject'],
  completions: [
    ...typescript.completions,  // keep all built-in TS completions
    {
      label:   'useAppDispatch',
      kind:    'fn',
      detail:  '() => AppDispatch',
      language: 'typescript',
    },
  ],
});
Syncline Editor

© 2026 Syncline Editor. All rights reserved.

DocsPlaygroundnpm