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 36 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 Path	Format	Description
`@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@0.1.1/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@0.1.1/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 36 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

Browser	Min Version	Notes
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

v0.1.1

2026-02-20

• Initial public release with 36 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

Custom Plugins

Theming

Docs Playground npm