Plugin-based MDX editing for every framework

The framework-agnostic MDX editor

35 built-in plugins. Zero framework lock-in. Ship beautiful content editors in minutes — works with React, Vue, Angular, or plain JavaScript.

Headings

Tables

Code Blocks

KaTeX Math

Mermaid

Get started free Try the playground

SynclineMDX Editor

Editor

Preview

Source

# Getting Started

Install the editor with **npm**:

```bash
npm i @synclineapi/mdx-editor
```

35 plugins available

TypeScript 5.4

Live Preview

WCAG AA accessible

Built-in

KaTeX math rendering

Plugin

Syntax highlighting

Prism

GFM table editing

Plugin

Zero framework lock-in — works everywhere

plugins ready out of the box

<150kB

gzipped — lean and fast

WCAG AA

accessible by default

Free

no hidden costs or usage limits

Features

Everything you need to ship great editors

A complete toolkit built for developer experience and end-user delight. 35 plugins, zero lock-in.

Plugin-based architecture

Every feature is a plugin. Enable only what you need — keep your bundle lean and your API surface small.

Framework agnostic

Works with React, Vue, Angular, Svelte, or plain JavaScript. One editor, every stack.

Live preview & scroll sync

Side-by-side split view with real-time rendering. Editor and preview scroll in perfect sync.

WCAG AA accessible

Full keyboard navigation, ARIA labels, focus management, and screen-reader support out of the box.

TypeScript first

Written in TypeScript 5.4 with full type exports. Autocomplete for every option and plugin API.

Fully themeable

CSS variables, dark/light mode, custom color palettes — match your brand in minutes.

XSS sanitized

All user-generated HTML is sanitized before rendering. Safe by default, configurable allowlists.

KaTeX math rendering

Inline and block LaTeX math rendering via KaTeX. Perfect for scientific and technical content.

Mermaid diagrams

Render flowcharts, sequence diagrams, Gantt charts, and more with native Mermaid support.

Autocomplete & snippets

Powered by the Syncline Editor engine — 60+ MDX snippets, language-aware code-block completions, and a one-call registerAutoComplete() API to add your own.

Autocomplete & Snippets

Type less. Write more.

Powered by the Syncline Editor engine — 60+ MDX snippets, language-aware code-block completions, and a one-call API to register your own.

Live autocomplete popup

readme.mdx
# Quick Start Guide
Install the package and create your first editor.
co
snip
code
inline code
snip
col2
2-column layout
snip
col3
3-column layout
snip
container
<Container> block
snip
codepen
Embed CodePen
↑↓ navigate · Tab insert · Esc close

Type 2+ characters — suggestions appear instantly, powered by @synclineapi/editor.

What's included

Markdown shortcuts

h1…h6 → ATX headings

bold, italic, strike

cb → ``` code block

tbl → GFM table

MDX components

card, cards, accordion

tabs, col2…col5, steps

container, tooltip, copy

adm-tip / warn / danger…

Embeds & diagrams

youtube, video, gist

codepen, codesandbox

mermaid-flow / -seq / -gantt

math, mathblock (KaTeX)

Custom & in-file

registerAutoComplete() API

Snippets with $1 tab-cursors

Language-aware in code blocks

In-file word extraction

Extend with your own completions

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

const editor = createEditor({ container: '#editor' });

// Merge your completions on top of the 60+ built-in MDX snippets
editor.registerAutoComplete([
  { label: 'ApiBlock',  kind: 'cls',  detail: 'custom component' },
  { label: 'apiKey',    kind: 'var',  detail: 'your API key variable' },
  {
    label: 'fetch-api',
    kind:  'snip',
    detail: 'API fetch snippet',
    body:  'const res = await fetch("$1/api/endpoint");\nconst data = await res.json();',
  },
]);

Plugins

35 plugins, all ready to use

9 categories, every plugin built-in. Enable only what you need — tree-shakeable by default.

Total Plugins

Up and running in minutes

Three lines of JavaScript. Works in every modern browser.

Install

npm install @synclineapi/mdx-editor

Vanilla JS

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

// createEditor() includes all 35 plugins by default
const editor = createEditor({
  container: '#my-editor',
  value: '# Hello World',
  onChange(markdown) {
    console.log('Content updated:', markdown);
  },
});

React Integration

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 ref = useRef<HTMLDivElement>(null);
  const editorRef = useRef<SynclineMDXEditor>();

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

  return <div ref={ref} />;
}

Read the Docs Open Playground

Ready to ship your MDX editor?

Free to get started. No login required. No usage limits. Just great MDX editing.

Get started free