SynclineMDXSynclineMDX
FeaturesPluginsDocsPlayground
Get started
Embeds
Diagrams
3 Plugins

Embeds & Diagrams Plugins

Embed external content (YouTube, videos, Twitter, CodePen, CodeSandbox, GitHub Gists) and create diagrams (flowcharts, sequences, Gantt charts) with Mermaid.

Usage

setup.ts

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

// All plugins included by default
const editor = createEditor({
  container: '#editor',
});

// Or import specific plugins
import {
  SynclineMDXEditor,
  embedVideoPlugin,
  embedOthersPlugin,
  mermaidPlugin,
} from '@synclineapi/mdx-editor';

const editor = new SynclineMDXEditor({
  container: '#editor',
  plugins: [
    embedVideoPlugin(),
    embedOthersPlugin(),
    mermaidPlugin(),
  ],
});

embedVideoPlugin() — YouTube

Embed a YouTube video with the <EmbedVideo> JSX component. Set type="youtube" and provide the full video URL via src.

youtube.mdx

<EmbedVideo type="youtube" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />

embedVideoPlugin() — File Video

Embed a self-hosted or remote video file with type="file". Supports local paths and remote URLs.

video.mdx

<EmbedVideo type="file" src="/videos/demo.mp4" />

<EmbedVideo type="file" src="https://example.com/intro.webm" />

embedOthersPlugin() — GitHub Gist

Embed a GitHub Gist using <Embed type="github"> with the full gist URL. Add an optional label attribute for a custom title.

gist.mdx

<Embed type="github" src="https://gist.github.com/user/abc123def456" />

<Embed type="github" src="https://gist.github.com/user/abc123def456" label="Helper utilities" />

embedOthersPlugin() — Twitter

Embed a tweet using <Embed type="twitter"> with the full tweet URL.

twitter.mdx

<Embed type="twitter" src="https://twitter.com/user/status/1234567890" />

embedOthersPlugin() — CodePen

Embed a CodePen pen using <Embed type="codepen"> with the full pen URL.

codepen.mdx

<Embed type="codepen" src="https://codepen.io/syncline/pen/abc123" />

embedOthersPlugin() — CodeSandbox

Embed a CodeSandbox project using <Embed type="codesandbox"> with the sandbox URL.

codesandbox.mdx

<Embed type="codesandbox" src="https://codesandbox.io/s/project-abc123" />

mermaidPlugin()

Render Mermaid diagrams from fenced code blocks with the mermaid language tag. Supports flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, ER diagrams, and user journey maps. Requires the Mermaid library loaded on the page.

Flowchart

flowchart.md

```mermaid
graph TD
    A[Start] --> B{Is it valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Show Error]
    C --> E[Save to DB]
    D --> F[Log Warning]
    E --> G[Return Success]
    F --> G
```

Sequence Diagram

sequence.md

```mermaid
sequenceDiagram
    participant Client
    participant API
    participant DB

    Client->>API: POST /documents
    API->>DB: INSERT document
    DB-->>API: OK
    API-->>Client: 201 Created
```

Gantt Chart

gantt.md

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Design
    Wireframes     :done, d1, 2026-01-01, 7d
    UI Design      :done, d2, after d1, 10d
    section Development
    Core Editor    :active, dev1, 2026-01-18, 14d
    Plugin System  :dev2, after dev1, 10d
    section Testing
    Unit Tests     :test1, after dev2, 7d
    E2E Tests      :test2, after test1, 5d
```
SynclineMDX

© 2026 SynclineMDX Editor. All rights reserved.

DocsPlaygroundnpm