Layout Plugins

Structural layout plugins for tables, multi-column layouts, tabbed content, and generic containers. These plugins let you create rich, structured documents beyond simple prose.

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,
  tablePlugin,
  multiColumnPlugin,
  tabPlugin,
  containerPlugin,
} from '@synclineapi/mdx-editor';

const editor = new SynclineMDXEditor({
  container: '#editor',
  plugins: [tablePlugin(), multiColumnPlugin(), tabPlugin(), containerPlugin()],
});

`tablePlugin()`

GFM-style tables with column alignment (:--- left, :---: center, ---: right). Inserts a ready-made table template from the toolbar.

table.md

| Feature       | Status | Priority |
|---------------|:------:|---------:|
| Plugin system | ✅ Done | High     |
| Dark theme    | ✅ Done | Medium   |
| Mobile view   | 🔜 Soon | Low      |

`multiColumnPlugin()`

Create 2 to 5-column layouts using the <Columns> JSX component with a count attribute. Each column is wrapped in a <Column> element and supports full Markdown content.

multi-column.mdx

<Columns count="2">
  <Column>
    Left column content with **bold** and *italic* text.
    Support for full Markdown inside each column.
  </Column>
  <Column>
    Right column content with a list:
    - Item one
    - Item two
    - Item three
  </Column>
</Columns>

<Columns count="3">
  <Column>
    ### Column 1
    First column.
  </Column>
  <Column>
    ### Column 2
    Second column.
  </Column>
  <Column>
    ### Column 3
    Third column.
  </Column>
</Columns>

`tabPlugin()`

Tabbed content panels using the <Tabs> JSX component. Each tab is defined with a <Tab title="..."> child element.

tabs.mdx

<Tabs>
  <Tab title="npm">
    ```bash
    npm install @synclineapi/mdx-editor
    ```
  </Tab>
  <Tab title="pnpm">
    ```bash
    pnpm add @synclineapi/mdx-editor
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add @synclineapi/mdx-editor
    ```
  </Tab>
</Tabs>

`containerPlugin()`

A styled wrapper using the <Container> JSX component with an optional title attribute.

container.mdx

<Container>
  Content inside a styled container.
</Container>

<Container title="Optional Title">
  This content is wrapped in a styled block with a title header.
</Container>

Links & Media Plugins

Components Plugins

Docs Playground npm