Plugin-based MDX editing for every framework

The framework-agnostic MDX editor

36 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
```

36 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. 36 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.

Plugins

36 plugins, all ready to use

Browse every built-in plugin by category. Enable only what you need.

Heading

H1–H6 headings with ATX and setext syntax support

Bold

Bold text using **double asterisks** or __underscores__

Italic

Italic text using *asterisks* or _underscores_

Strikethrough

Strikethrough text using ~~double tildes~~

Blockquote

Block quotations with nested quote support

Horizontal Rule

Thematic breaks with --- or *** syntax

Link

Inline and reference-style hyperlinks with title support

Image

Inline images with alt text and optional title

Image Background

Full-width background image with overlay options

Image Frame

Framed image component with caption support

Inline Code

Inline code spans with `backtick` syntax

Code Block

Fenced code blocks with language syntax highlighting via Prism

Unordered List

Bullet lists using -, +, or * markers

Ordered List

Numbered lists with automatic reordering

Task List

Interactive checkbox lists with [ ] and [x] syntax

Table

GFM-style tables with alignment, sorting, and cell editing

Multi-Column

Two or three column layout for side-by-side content

Tabs

Tabbed content panels with keyboard navigation

Container

Semantic wrapper div with custom class and style attributes

Accordion

Collapsible Q&A sections with keyboard-accessible toggle

Card

Content card with title, description, and action slot

Steps

Numbered step-by-step guide component

Tip

Green tip callout for helpful suggestions

Warning

Yellow warning callout for cautions

Caution

Orange caution callout for potential issues

Danger

Red danger callout for critical warnings

Check

Green checkmark callout for confirmations

Info

Blue info callout for contextual information

Note

Neutral note callout for supplementary content

Highlight

Text highlighting with configurable colors via ==mark==

Emoji

Emoji picker with :shortcode: syntax support

Formula (KaTeX)

Inline and block LaTeX math rendering via KaTeX

Tooltip

Hover tooltip attached to any inline element

Copy Text

One-click copy button for code and text blocks

YouTube

Responsive YouTube embed with lazy loading

Video

HTML5 video embed with controls and poster support

GitHub Gist

Embedded GitHub Gist via script tag

Twitter / X

Embedded tweet via Twitter oEmbed API

CodePen

Embedded CodePen pen with selectable tabs

CodeSandbox

Embedded CodeSandbox project in split mode

Flowchart

Top-down and left-right directed graph diagrams

Sequence

UML sequence diagrams for interaction flows

Gantt

Project timeline and scheduling Gantt charts

Class

Object-oriented class diagrams and relationships

State

Finite state machine diagrams

API Endpoint

Live API call block with method, URL, and response preview

Markdown Import

Import markdown from a URL or file upload

Code Snippet

Named reusable code snippet with variable substitution

Quick start

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 36 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