Getting Started

Syncline Editor is a zero-dependency, pixel-perfect browser code editor. Virtual rendering handles 100k+ line files. Full TypeScript declarations. Works in every modern browser and every framework.

Node.js 18+ and a modern bundler (Vite, webpack, or Next.js) are recommended. For CDN usage without a build step, see the HTML example below.

Installation

Install from npm:

terminal

npm install @synclineapi/editor
# or
yarn add @synclineapi/editor
# or
pnpm add @synclineapi/editor

Quick Start (ES Module)

Call createEditor() with a container element and optional config:

main.ts

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

// Give the container an explicit height — the editor fills 100% of its host.
const editor = createEditor(document.getElementById('app')!, {
  value: 'const greeting = "Hello, world!";',
  language: 'typescript',
  theme: 'dracula',
  onChange: (value) => console.log('changed:', value.length, 'chars'),
});

The editor fills 100% of its container element. Give the container an explicit height (e.g. height: 600px).

React Integration

Use useRef + useEffect to mount the editor and call destroy() on unmount:

CodeEditor.tsx

'use client';

import { useRef, useEffect } from 'react';
import { createEditor } from '@synclineapi/editor';
import type { EditorAPI } from '@synclineapi/editor';

export function CodeEditor() {
  const containerRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<EditorAPI | null>(null);

  useEffect(() => {
    editorRef.current = createEditor(containerRef.current!, {
      language: 'typescript',
      theme: 'vscode-dark',
      onChange: (val) => console.log(val),
    });
    return () => editorRef.current?.destroy();
  }, []);

  return <div ref={containerRef} style={{ height: 400 }} />;
}

Next.js (App Router)

Mark the file 'use client' because the editor uses browser APIs.useEffect ensures it only initialises on the client:

app/editor/page.tsx

// app/editor/page.tsx
'use client';

import { useRef, useEffect } from 'react';
import { createEditor } from '@synclineapi/editor';
import type { EditorAPI } from '@synclineapi/editor';

export default function EditorPage() {
  const containerRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<EditorAPI | null>(null);

  useEffect(() => {
    editorRef.current = createEditor(containerRef.current!, {
      language: 'typescript',
      theme: 'vr-dark',
    });
    return () => editorRef.current?.destroy();
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: 500 }} />;
}

CDN / No Build Tool

Drop the UMD bundle into any HTML page:

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="app" style="width:100%;height:600px"></div>
    <script src="https://cdn.jsdelivr.net/npm/@synclineapi/editor/dist/syncline-editor.umd.js"></script>
    <script>
      const editor = SynclineEditor.createEditor(
        document.getElementById('app'),
        {
          value: '// start coding',
          language: 'typescript',
          theme: 'vscode-dark',
        }
      );
    </script>
  </body>
</html>

Common Config Options

A quick reference for the most frequently used options. See the full Configuration page for every option.

Option	Type	Default	Description
`value`	`string \| string[]`	`''`	Initial document content. String or pre-split string[].
`language`	`Language`	`'typescript'`	Syntax highlighting and autocomplete language.
`theme`	`string \| ThemeDefinition`	`'' (VR Dark)`	Built-in theme ID or a full ThemeDefinition object.
`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.
`wordWrap`	`boolean`	`false`	Soft-wrap long lines at wrapColumn.
`readOnly`	`boolean`	`false`	Block all edits. Navigation and copy still work.
`tabSize`	`number`	`2`	Spaces per Tab press.
`fontSize`	`number`	`13`	Font size in pixels.
`lineHeight`	`number`	`22`	Row height in pixels.
`onChange`	`(value: string) => void`	`undefined`	Fired after every content change.
`onCursorChange`	`(pos: CursorPosition) => void`	`undefined`	Fired when the cursor moves.

Next Steps

→ Full configuration reference

→ Themes & custom theming

→ Autocomplete & completions

→ Runtime API

→ Try the interactive playground

Configuration

Docs Playground npm