MDX Support

Lextrix 2.x can import and export MDX through the same ChangeSet serialization pipeline as HTML and Markdown. This is useful for CMS storage where content authors write rich text but the backend persists MDX.

Basic usage

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

React persistence pattern

useEffect(() => {
  const editor = new Lextrix(ref.current);
  if (initialMdx) editor.importContent(initialMdx, 'mdx');
 
  const onChange = () => save(editor.exportContent('mdx'));
  editor.on('text-change', onChange);
  return () => editor.off('text-change', onChange);
}, []);

See React Integration for full mount patterns.

Experimental: MDX components

registerMdxComponent is not stable API in 2.0. Current behavior:

• Unknown JSX is stored as raw text with an mdx-component block attribute
• Frontmatter and import/export lines are stripped on import
• Parsing uses regex, not an AST — nested or complex JSX may miss edge cases
• No component embed blot, in-editor preview, or JSX runtime

Use MDX export for CMS storage. Register toChangeSet / fromChangeSet only for components you control and test.

import { registerMdxComponent } from 'lextrix';
 
registerMdxComponent('Callout', {
  toChangeSet: (props) => { /* ... */ },
  fromChangeSet: (node) => { /* ... */ },
});

MDX vs custom embed blots

For in-editor structured blocks, register a format blot:

import { defineBlockFormat } from 'lextrix-formats/block-format.js';
import { lxrPath } from 'lextrix-core/registry-paths.js';
 
const Callout = defineBlockFormat({
  blotName: 'callout',
  tagName: 'DIV',
  className: 'lxr-callout',
});
 
Lextrix.register({ [lxrPath.format('callout')]: Callout });

Limitations

• Native editor tables cannot export to MDX — use HTML export
• MDX component handling is experimental in 2.0
• Horizontal rules export as escaped --- text

Next steps

• Serialization — pipeline overview and headless usage
• Markdown Support — simpler boundary format
• Formats guide on GitHub