MDX Support

Import and export MDX for CMS storage — experimental component handlers and custom embeds.

Lextrix imports and exports MDX through the same ChangeSet pipeline as HTML and Markdown.

Basic usage

JavaScript

editor.importContent(`# Hello
 
<Callout type="warning">Ship carefully.</Callout>
`, 'mdx');
 
const mdx = editor.exportContent('mdx');

React persistence

Prefer @lextrix/react (LextrixEditor with format="mdx"). For a manual mount, see Framework Integration and DOM Mounting.

TypeScript

import { LextrixEditor } from '@lextrix/react';
import 'lextrix/snow.css';
 
<LextrixEditor
  theme="snow"
  format="mdx"
  value={mdx}
  onChange={setMdx}
/>

Experimental: MDX components

registerMdxComponent is not stable API. Unknown JSX is stored as raw text; parsing uses regex, not an AST. See Serialization for details.

For in-editor structured blocks, register a custom format blot — see Plugin System.

Limitations

Native editor tables cannot export to MDX — use HTML export.
Horizontal rules export as escaped --- text so they do not become thematic breaks.

Next steps