Serialization — Lextrix Docs

importContent and exportContent for HTML, Markdown, MDX, and JSON — all through ChangeSet.

Lextrix 2.x ships native import and export for HTML, Markdown, MDX, and JSON. Every format routes through ChangeSet — the same model as getContents(), clipboard, and operational transform.

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

Quick start

JavaScript

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

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

How it works

Plain text

HTML / Markdown / MDX / JSON
        ↓ importContent
    ChangeSet
        ↓ exportContent
HTML / Markdown / MDX / JSON

Package	Role
`lextrix-change`	ChangeSet ops
`lextrix-modules/html-import`	HTML string → ChangeSet (shared with clipboard)
`lextrix-core`	Editor API, HTML export via blot tree
`lextrix-serialize`	Markdown, MDX, JSON ↔ ChangeSet; registry; headless host

lextrix-serialize does not depend on lextrix-core — use it headless when you only need parse/stringify.

Headless (`lextrix-serialize`)

JavaScript

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');

Partial export

JavaScript

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

Custom serializers

JavaScript

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

`LextrixOptions.serializers`

Value	Effect
omitted or `true`	Built-in formats (json, html, markdown, mdx) plus globals
`ContentSerializer[]`	Listed serializers plus globals
`false`	No serializers, including globals

Limitations

Topic	Behavior
Native editor tables → Markdown/MDX	Throws `SerializationError` (`TABLE_EXPORT_UNSUPPORTED`). Use `exportContent('html')`.
GFM tables (Markdown import)	Simple tables round-trip. No colspan, rowspan, or merged cells.
Markdown dialect	Subset only — not full CommonMark/GFM.
MDX components	Experimental — see MDX Support.
Align, color, font	HTML/JSON only — not exported to Markdown/MDX

Migration from older patterns

Before	After
`editor.getSemanticHTML()`	`editor.exportContent('html')`
`clipboard.convert({ html })` + `setContents`	`editor.importContent(html, 'html')`
`JSON.stringify(editor.getContents().ops)`	`editor.exportContent('json')`

Next steps

Markdown Support — storage patterns and dialect limits
MDX Support — CMS workflows and component handlers
Full serialization guide on GitHub

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

Quick start

JavaScript

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

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

How it works

Plain text

HTML / Markdown / MDX / JSON
        ↓ importContent
    ChangeSet
        ↓ exportContent
HTML / Markdown / MDX / JSON

Package	Role
`lextrix-change`	ChangeSet ops
`lextrix-modules/html-import`	HTML string → ChangeSet (shared with clipboard)
`lextrix-core`	Editor API, HTML export via blot tree
`lextrix-serialize`	Markdown, MDX, JSON ↔ ChangeSet; registry; headless host

lextrix-serialize does not depend on lextrix-core — use it headless when you only need parse/stringify.

Headless (`lextrix-serialize`)

JavaScript

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');

Partial export

JavaScript

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

Custom serializers

JavaScript

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

`LextrixOptions.serializers`

Value	Effect
omitted or `true`	Built-in formats (json, html, markdown, mdx) plus globals
`ContentSerializer[]`	Listed serializers plus globals
`false`	No serializers, including globals

Limitations

Topic	Behavior
Native editor tables → Markdown/MDX	Throws `SerializationError` (`TABLE_EXPORT_UNSUPPORTED`). Use `exportContent('html')`.
GFM tables (Markdown import)	Simple tables round-trip. No colspan, rowspan, or merged cells.
Markdown dialect	Subset only — not full CommonMark/GFM.
MDX components	Experimental — see MDX Support.
Align, color, font	HTML/JSON only — not exported to Markdown/MDX

Migration from older patterns

Before	After
`editor.getSemanticHTML()`	`editor.exportContent('html')`
`clipboard.convert({ html })` + `setContents`	`editor.importContent(html, 'html')`
`JSON.stringify(editor.getContents().ops)`	`editor.exportContent('json')`

Next steps

Markdown Support — storage patterns and dialect limits
MDX Support — CMS workflows and component handlers
Full serialization guide on GitHub