SynclineMDXSynclineMDX
FeaturesPluginsDocsPlayground
Get started
npm
@synclineapi/mdx-editor
v2.0.0

npm Package

Package details, export paths, browser support matrix, CDN usage, and the changelog for @synclineapi/mdx-editor.

Installation

terminal

# npm
npm install @synclineapi/mdx-editor

# pnpm
pnpm add @synclineapi/mdx-editor

# yarn
yarn add @synclineapi/mdx-editor

View on npmjs.com

Package Exports

The package provides two export paths via Node.js exports:

imports.ts

// Main entry — createEditor, SynclineMDXEditor, all plugins & types
import { createEditor } from '@synclineapi/mdx-editor';

// Stylesheet — required for the editor to render correctly
import '@synclineapi/mdx-editor/style.css';

// Named exports — class, plugins, utilities
import {
  SynclineMDXEditor,
  allPlugins,
  defaultToolbar,
  headingPlugin,
  boldPlugin,
  codePlugin,
  // ... all 35 plugin factories
} from '@synclineapi/mdx-editor';

// Types only
import type {
  EditorConfig,
  EditorPlugin,
  EditorAPI,
  EditorMode,
  PluginContext,
  ToolbarConfig,
  ToolbarItemConfig,
  RendererConfig,
  ParserConfig,
  ShortcutConfig,
  SelectionState,
} from '@synclineapi/mdx-editor';
Export PathFormatDescription
@synclineapi/mdx-editor
ESM / CJS / Types

Main entry — createEditor(), SynclineMDXEditor, all plugin factories, types

@synclineapi/mdx-editor/style.css
CSS

Required stylesheet for the editor

CDN Usage

Use via jsDelivr without a build step:

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@synclineapi/mdx-editor@2.0.0/dist/style.css" />
  </head>
  <body>
    <div id="editor"></div>

    <!-- ESM (modern browsers) -->
    <script type="module">
      import { createEditor } from
        'https://cdn.jsdelivr.net/npm/@synclineapi/mdx-editor@2.0.0/dist/syncline-mdx-editor.js';

      createEditor({ container: '#editor', value: '# Hello' });
    </script>
  </body>
</html>

Minimal Setup

Import only the plugins you need instead of using createEditor() which includes all 35 plugins:

editor-minimal.ts

// Use specific plugins instead of allPlugins() for a smaller setup:
import {
  SynclineMDXEditor,
  headingPlugin,
  boldPlugin,
  italicPlugin,
  codePlugin,
  defaultToolbar,
} from '@synclineapi/mdx-editor';
import '@synclineapi/mdx-editor/style.css';

const editor = new SynclineMDXEditor({
  container: '#editor',
  plugins: [headingPlugin(), boldPlugin(), italicPlugin(), codePlugin()],
  toolbar: defaultToolbar(),
});

Browser Support

BrowserMin VersionNotes

Chrome

90+

Full support including clipboard API

Firefox

88+

Full support

Safari

14+

Full support

Edge

90+

Chromium-based, full support

iOS Safari

14+

Touch events supported

Android Chrome

90+

Full support

Changelog

v2.0.0

2026-04-13

• Plugin API: replaced `renderers` with `patterns` (non-JSX fenced-block syntax) and `components` (declarative JSX components via defineComponent())

• New `defineComponent()` helper — type-safe MDX component definitions with auto-registered syntax tokens and autocomplete

• New `CompletionItem` and `TokenSegment` types re-exported for plugin authors

• New `provideTokens` / `registerTokenProvider` per-plugin token provider API

• New `completions` field on `EditorPlugin` for static autocomplete items

• New modular renderer pipeline: RendererPipeline, MarkdownRenderer, CodeRenderer, TableRenderer, ListRenderer, MdxValidator

• New UI controllers: UIController, ModeController, ThemeController, StatusBarController, LineNumberController, DropdownController, SplitterController, PreviewController, AutocompleteController, FindReplaceController

• New DOM helpers: createEditorRoot, createEditorPane, createPreviewPane, createStatusBar, createToolbarDOM, createSkipLink

• New token utilities: componentTagTokens, mdxBaseTokens, composeTokenProviders

• PluginContext: added registerCompletion() and registerTokenProvider() dynamic registration methods

• Removed scrollSync from EditorConfig (scroll sync is handled internally)

v1.0.2

2026-02-20

• Initial public release with 35 built-in plugins

• Framework-agnostic — works with vanilla JS, React, Vue, etc.

• TypeScript 5.4 strict types

• WCAG AA accessibility (skip link, ARIA roles, keyboard navigation)

• Dark mode via .smdx-dark CSS class

• Full CSS custom property theming

• KaTeX math rendering

• Mermaid diagram support

• ESM and UMD builds

SynclineMDX

© 2026 SynclineMDX Editor. All rights reserved.

DocsPlaygroundnpm