Links & Media Plugins

Hyperlinks, images, full-width hero backgrounds, and framed images with captions.

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,
  linkPlugin,
  imagePlugin,
  imageBackgroundPlugin,
  imageFramePlugin,
} from '@synclineapi/mdx-editor';

const editor = new SynclineMDXEditor({
  container: '#editor',
  plugins: [linkPlugin(), imagePlugin(), imageBackgroundPlugin(), imageFramePlugin()],
});

`linkPlugin()`

Inline and reference-style Markdown links with standard [text](url) syntax.

links.md

[Visit SynclineAPI](https://synclineapi.com "SynclineAPI Homepage")

[Docs](/docs/getting-started)

Reference-style links:
[SynclineMDX][1]

[1]: https://mdx.synclineapi.com "SynclineMDX Editor"

Keyboard shortcut: Ctrl/⌘ + K

`imagePlugin()`

Standard Markdown image syntax with ![alt](url).

images.md

![A beautiful landscape](https://example.com/landscape.jpg "Mountain Vista")

![Logo](/images/logo.png)

`imageBackgroundPlugin()`

Full-width hero image with a gradient overlay and text content on top. Uses the <ImageBackground> JSX component with src, alt, and background attributes.

image-background.mdx

<ImageBackground src="/images/hero.jpg" alt="Hero banner" background="#1a1b1e">
# Welcome to Our Docs
A full-width hero image with text overlay and gradient.
</ImageBackground>

`imageFramePlugin()`

Framed image with a caption below using the self-closing <ImageFrame /> JSX component with src, alt, and caption attributes.

image-frame.mdx

<ImageFrame src="/images/architecture.png" alt="Plugin Architecture" caption="Architecture diagram showing the plugin system" />

Lists Plugins

Layout Plugins

Docs Playground npm