Zero-dependency code editor for the browser

The pixel-perfect code editor

Virtual rendering for 100k+ line files. Shadow DOM encapsulation. Full syntax highlighting, 6 built-in themes, multi-cursor, and every feature you expect — in a single zero-dependency bundle.

Zero Dependencies

Virtual Rendering

Multi-Cursor

6 Themes

Shadow DOM

TypeScript

Get started free Open playground

main.ts

1
import { createEditor } from '@synclineapi/editor'
2
3
const editor = createEditor(
4
  document.getElementById('app')!, {
5
  language: 'typescript',
6
  theme: 'dracula',
7
  showMinimap: true,
8
  onChange: (value) => console.log(value),
9
});

TypeScript

Ln 9, Col 3

Dracula

UTF-8

external runtime dependencies

100k+

lines — virtual rendering handles it

built-in themes, fully customisable

Free

MIT licence, no usage limits

Features

Everything you need in a code editor

A complete, battle-tested toolkit — from virtual rendering to Emmet expansion — in a single bundle with zero runtime dependencies.

Zero dependencies

No external runtime libraries. One self-contained ES module or UMD bundle — nothing else to install or worry about.

Virtual rendering

Only visible rows exist in the DOM at any time. Open 100,000-line files without a stutter.

Shadow DOM encapsulation

Styles live inside a Shadow DOM. No CSS leakage in either direction between your page and the editor.

TypeScript first

Written in TypeScript 5.4 with full type exports. Autocomplete and type-safety for every option.

6 built-in themes

VR Dark, VS Code Dark+, Monokai, Dracula, GitHub Light, Solarized Light — plus a full custom theme API.

Multi-cursor editing

Alt+Click to add extra cursors. Ctrl+D to select the next occurrence. Simultaneous editing across every cursor.

Find & Replace

Literal and regex search, case-sensitive mode, replace one or all — all in a compact, keyboard-driven UI.

Canvas minimap

A pixel-rendered minimap with a draggable viewport slider gives instant orientation in large files.

Rich editing features

Bracket matching, code folding, Emmet expansion, hover docs, word highlight, snippets, and indent guides.

Themes

6 beautiful built-in themes

Switch instantly with editor.setTheme(), or craft a fully custom theme using the ThemeDefinition API — every CSS variable is exposed.

import { Editor } from 'core'

const editor = new Editor()

TypeScript

Ln 3, Col 1

VR Dark

Default

import { Editor } from 'core'

const editor = new Editor()

TypeScript

Ln 3, Col 1

VS Code Dark+

Popular

import { Editor } from 'core'

const editor = new Editor()

TypeScript

Ln 3, Col 1

Dracula

Dark

import { Editor } from 'core'

const editor = new Editor()

TypeScript

Ln 3, Col 1

Monokai

Classic

import { Editor } from 'core'

const editor = new Editor()

TypeScript

Ln 3, Col 1

GitHub Light

Light

import { Editor } from 'core'

const editor = new Editor()

TypeScript

Ln 3, Col 1

Solarized Light

Light

Quick start

Up and running in minutes

Three lines of JavaScript. Works in every modern browser and every framework.

Install

npm install @synclineapi/editor

ES Module

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

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

React / Next.js

'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 }} />;
}

CDN / No build tool

<div id="app" style="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'),
    { language: 'typescript', theme: 'dracula' }
  );
</script>

Read the docs Open playground

Ready to ship your code editor?

Free to get started. Zero dependencies. No login required. Just drop it in and start coding.

Get started free