Serialization

Import and export editor content as HTML, Markdown, MDX, or JSON. All formats go through ChangeSet — the same model as getContents(), clipboard, and OT.

There is no direct HTML ↔ Markdown ↔ MDX conversion. To change formats, import into the editor (or SerializerHost) and export the target format.

Quick start

import Lextrix from 'lextrix';
 
const editor = new Lextrix('#editor');
 
const html = editor.exportContent('html');
const md = editor.exportContent('markdown');
 
editor.importContent('<p>Hello <strong>world</strong></p>', 'html');
editor.importContent('# Title\n\nParagraph.', 'markdown');

Use importContent / exportContent instead of import / export. Lextrix.import() is the module loader and is unrelated.

Limitations

MDX components (experimental)

registerMdxComponent is not stable API.

• 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 will 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

API

Editor

editor.exportContent(format: string): string
editor.exportContent({ format, index?, length? }): string
 
editor.importContent(content: string, format: string, source?: EmitterSource): void
 
editor.listExportFormats(): string[]

export() and import() are aliases. Prefer exportContent / importContent in application code.

Global registration

import { registerSerializer, registerMdxComponent } from 'lextrix';
import ChangeSet from 'lextrix-change';
 
registerSerializer({
  format: 'plain',
  import: (text) => new ChangeSet([{ insert: text }, { insert: '\n' }]),
  export: (delta) => delta.getText(),
});

Call registerSerializer before creating editors. Serializers registered globally are merged into each editor unless serializers: false.

Headless (lextrix-serialize)

Monorepo / contributors only — the npm package bundles serialization into lextrix; use editor.importContent / exportContent in apps.

import {
  SerializerHost,
  createSerializerRegistry,
  markdownSerializer,
} from 'lextrix-serialize';
 
const host = new SerializerHost(createSerializerRegistry([markdownSerializer()]));
 
const delta = host.parse('# Hello', 'markdown');
const md = host.stringify(delta, 'markdown');

host.export() needs a bound editor adapter. For headless export, use host.stringify().

LextrixOptions.serializers

Examples

Partial export

const slice = editor.exportContent({ format: 'html', index: 0, length: 100 });

React / Next.js

Prefer @lextrix/react so mount/teardown and format are handled for you:

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

Manual mount pattern: Frameworks · DOM mounting.

Migration from older patterns

How it works

HTML / Markdown / MDX / JSON
        ↓ import
    ChangeSet
        ↓ export
HTML / Markdown / MDX / JSON

lextrix-serialize does not depend on lextrix-core. HTML export is DOM-backed, not derived purely from ChangeSet.

Testing

npm run test -w lextrix-serialize
npm run test -w lextrix-core
npm run test:unit -w lextrix

Tests: packages/serialize/tests/, packages/lextrix/test/unit/core/serialization.spec.ts, packages/lextrix/test/e2e/serialization.spec.ts.