Components Plugins

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,
  accordionPlugin,
  accordionGroupPlugin,
  cardPlugin,
  cardGroupPlugin,
  stepPlugin,
} from '@synclineapi/mdx-editor';

const editor = new SynclineMDXEditor({
  container: '#editor',
  plugins: [
    accordionPlugin(),
    accordionGroupPlugin(),
    cardPlugin(),
    cardGroupPlugin(),
    stepPlugin(),
  ],
});

<AccordionGroup>
  <Accordion title="What is SynclineMDX?">
    SynclineMDX is a framework-agnostic MDX editor with 35 built-in plugins,
    shipped as a single npm package. Works with React, Vue, Angular, or vanilla JS.
  </Accordion>
  <Accordion title="How do I install it?">
    ```bash
    npm install @synclineapi/mdx-editor
    ```
  </Accordion>
  <Accordion title="Can I use it commercially?" defaultOpen>
    Absolutely — SynclineMDX is built for commercial and enterprise use.
  </Accordion>
</AccordionGroup>

<Accordion title="Expand for details" defaultOpen>
  Content inside a single standalone accordion.
</Accordion>

<CardGroup cols="2">
  <Card title="Quick Start" icon="🚀" href="/docs/getting-started">
    Install the package, configure your plugins, and start writing.
    No build step required for basic usage.
  </Card>
  <Card title="Plugin Ecosystem" icon="🧩">
    35 built-in plugins covering formatting, code, media, diagrams,
    embeds, and more. Enable only what you need.
  </Card>
</CardGroup>

<Steps>
  <Step title="Install the package">
    ```bash
    npm install @synclineapi/mdx-editor
    ```
  </Step>
  <Step title="Import and configure">
    ```typescript
    import { createEditor } from '@synclineapi/mdx-editor';
    import '@synclineapi/mdx-editor/style.css';

    const editor = createEditor({
      container: '#editor',
    });
    ```
  </Step>
  <Step title="Customise the theme">
    Override CSS variables to match your brand:
    ```css
    :root {
      --smdx-primary: #4263eb;
    }
    ```
  </Step>
</Steps>