Getting Started

SynclineMDX Editor is a framework-agnostic, plugin-based MDX editor with 36 built-in plugins, dark mode, accessibility features, and a small gzipped footprint.

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

Installation

Install the package from npm:

terminal

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

Quick Start (Vanilla JS)

The createEditor() factory includes all 36 plugins and the default toolbar:

quick-start.js

import { createEditor } from '@synclineapi/mdx-editor';
import '@synclineapi/mdx-editor/style.css';

// createEditor() includes all 36 plugins and the default toolbar
const editor = createEditor({
  container: '#my-editor',
  value: '# Hello World',
  onChange(markdown) {
    console.log('Content changed:', markdown);
  },
});

Selective Plugins

Use the SynclineMDXEditor constructor directly for a lighter setup with only the plugins you need:

editor-selective.ts

import {
  SynclineMDXEditor,
  headingPlugin,
  boldPlugin,
  italicPlugin,
  codePlugin,
  defaultToolbar,
} from '@synclineapi/mdx-editor';
import '@synclineapi/mdx-editor/style.css';

// Use only specific plugins for a lighter setup
const editor = new SynclineMDXEditor({
  container: '#my-editor',
  value: '# Hello World',
  plugins: [headingPlugin(), boldPlugin(), italicPlugin(), codePlugin()],
  toolbar: defaultToolbar(),
  onChange(markdown) {
    console.log('Content changed:', markdown);
  },
});

React Integration

Use useRef + useEffect to mount the editor in a React component:

MyEditor.tsx

'use client';

import { useRef, useEffect } from 'react';
import { createEditor } from '@synclineapi/mdx-editor';
import type { SynclineMDXEditor } from '@synclineapi/mdx-editor';
import '@synclineapi/mdx-editor/style.css';

export function MyEditor() {
  const containerRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<SynclineMDXEditor>();

  useEffect(() => {
    editorRef.current = createEditor({
      container: containerRef.current!,
      value: '# Hello World',
      onChange(md) { console.log(md); },
    });
    return () => editorRef.current?.destroy();
  }, []);

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

Next.js (App Router)

Mark the component as 'use client' since the editor uses browser APIs. The useEffect ensures it only runs on the client:

app/editor/page.tsx

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

import { useRef, useEffect } from 'react';
import { createEditor } from '@synclineapi/mdx-editor';
import type { SynclineMDXEditor } from '@synclineapi/mdx-editor';
import '@synclineapi/mdx-editor/style.css';

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

  useEffect(() => {
    editorRef.current = createEditor({
      container: containerRef.current!,
      value: '# Hello MDX',
    });
    return () => editorRef.current?.destroy();
  }, []);

  return (
    <div>
      <div ref={containerRef} style={{ height: 500 }} />
    </div>
  );
}

CDN / No Build Tool

Drop the editor into any HTML page via jsDelivr:

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@synclineapi/mdx-editor@0.1.1/dist/style.css" />
  </head>
  <body>
    <div id="editor"></div>
    <script type="module">
      import { createEditor } from
        'https://cdn.jsdelivr.net/npm/@synclineapi/mdx-editor@0.1.1/dist/syncline-mdx-editor.js';
      const editor = createEditor({
        container: '#editor',
        value: '# Hello World',
      });
    </script>
  </body>
</html>

Configuration Options

All options accepted by createEditor() and the SynclineMDXEditor constructor:

Option	Type	Required	Description
`container`	`HTMLElement \| string`	Yes	CSS selector or DOM element to mount the editor into.
`value`	`string`	No	Initial markdown/MDX string. Defaults to empty string.
`plugins`	`EditorPlugin[]`	No	Array of plugin objects. createEditor() defaults to allPlugins().
`toolbar`	`ToolbarConfig`	No	Toolbar layout configuration. createEditor() defaults to defaultToolbar().
`theme`	`Record<string, string>`	No	CSS custom property overrides, e.g. { "--smdx-primary": "#e03131" }.
`mode`	`'split' \| 'editor' \| 'preview'`	No	Initial editor mode. Defaults to 'split'.
`placeholder`	`string`	No	Placeholder text shown when the editor is empty.
`readOnly`	`boolean`	No	Disables editing. Renders content in preview mode.
`scrollSync`	`boolean`	No	Syncs scrolling between editor and preview panes. Defaults to true.
`onChange`	`(md: string) => void`	No	Callback fired on every content change.
`locale`	`Partial<EditorLocale>`	No	Locale overrides for UI strings.

Next Steps

→ Explore the 36 built-in plugins

→ Build your own custom plugins

→ Customize the editor theme

→ Try the interactive playground

Built-in Plugins

Docs Playground npm