npm Package

Everything you need to know about installing, importing, and integrating @synclineapi/editor in any JavaScript environment.

@synclineapi/editor

v1.0.0

MIT

Zero Dependencies

TypeScript

Installation

terminal

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

Dependencies

Zero runtime deps

ESM gzip

~42 kB

Tree-shakeable

UMD gzip

~48 kB

CDN/require build

Themes

Built-in, no downloads

ES Module (Bundler)

Import directly in Vite, webpack, Rollup, esbuild, or any other modern bundler:

editor.ts

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

const editor: EditorAPI = createEditor(document.getElementById('editor')!, {
  language: 'typescript',
  theme: 'vr-dark',
});

CommonJS

editor.cjs

const { createEditor } = require('@synclineapi/editor');

const editor = createEditor(container, { language: 'javascript' });

CDN / No Bundler

Load from jsDelivr directly in a <script> tag — no build step required:

index.html

<!-- UMD build — no bundler needed -->
<script src="https://cdn.jsdelivr.net/npm/@synclineapi/editor/dist/syncline-editor.umd.js"></script>
<script>
  const { createEditor } = SynclineEditor;
  const editor = createEditor(document.getElementById('editor'), {
    language: 'typescript',
  });
</script>

<!-- ES-module via CDN -->
<script type="module">
  import { createEditor } from 'https://cdn.jsdelivr.net/npm/@synclineapi/editor/dist/syncline-editor.js';
  const editor = createEditor(document.getElementById('editor'));
</script>

React Integration

CodeEditor.tsx

// React 18+
import { useEffect, useRef } from 'react';
import { createEditor, type EditorAPI } from '@synclineapi/editor';
import '@synclineapi/editor/dist/syncline-editor.css';

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

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

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

Next.js App Router

The editor accesses DOM APIs at mount time — mark the component as a Client Component and use dynamic() to disable SSR:

page.tsx

// app/editor/page.tsx  (App Router)
'use client';
import dynamic from 'next/dynamic';

const CodeEditor = dynamic(() => import('@/components/CodeEditor'), { ssr: false });

export default function Page() {
  return <CodeEditor />;
}

Exports

Export	Kind	Description
`createEditor`	function	Create an editor instance in a DOM container.
`EditorAPI`	type	Interface of all methods on an editor instance.
`EditorConfig`	type	Full configuration object type.
`CompletionItem`	type	Shape of a static or dynamic completion entry.
`CompletionContext`	type	Argument to provideCompletions callback.
`HoverContext`	type	Argument to provideHover callback.
`HoverDoc`	type	Return value shape for provideHover.
`ThemeDefinition`	type	Schema for a full custom theme object.
`TokenColors`	type	Record<string, string> colour overrides map.
`CursorPosition`	type	{ line: number; column: number }
`Selection`	type	{ anchor, head, text }
`Language`	type	'typescript' \| 'javascript' \| 'css' \| 'json' \| 'markdown'

dist/ Contents

File	Format	Description
`dist/syncline-editor.js`	ESM	Tree-shakeable ES module.
`dist/syncline-editor.umd.js`	UMD	Universal build (CDN / CommonJS).
`dist/syncline-editor.css`	CSS	Base styles & Shadow DOM resets.
`dist/index.d.ts`	TypeScript	Type declarations for all exports.

Browser Support

Syncline Editor requires a modern browser with Shadow DOM v1, ResizeObserver, and Canvas support. Tested against:

Chrome 90+

Firefox 90+

Safari 15+

Edge 90+

Keyboard Shortcuts

Docs Playground npm