Lextrix

Rich-text editor for the web. MIT licensed.

Built by Reetesh Kumar · iamreetesh.com · Playground · Documentation

Playground · GitHub docs · Evaluation guide · Quick start · Issues

Evaluate in 5 minutes

1. Try the playground — no install
2. npm install lextrix — see Install below
3. Create an editor — import CSS, mount on a div, pass toolbar options
4. Load content — setContents() or importContent()
5. Export content — exportContent('markdown') or exportContent('html')

Install only lextrix. The other packages listed under Packages are for contributors and internal architecture — you do not need them to use the editor.

Using React or Next.js? Start with the Frameworks guide.

Full walkthrough: evaluation.md

Runnable examples: Vanilla Vite · React Vite

Install

npm install lextrix

import Lextrix from 'lextrix';
import 'lextrix/snow.css';

Optional: highlight.js for syntax highlighting, KaTeX for formulas.

Quick start

<div id="editor"></div>

const editor = new Lextrix('#editor', {
  theme: 'snow',
  placeholder: 'Start writing…',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ header: [1, 2, false] }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
      ['clean'],
    ],
    imageResize: true,
  },
});

editor.setContents([
  { insert: 'Hello Lextrix\n', attributes: { header: 1 } },
  { insert: 'Edit rich text with themes, modules, and ChangeSets.\n' },
]);

editor.on('text-change', (changeSet, oldChangeSet, source) => {
  if (source === 'user') {
    save(editor.getContents());
  }
});

More: cookbook · DOM mounting · React / Next.js

Serialization

const markdown = '# Title\n\n**bold** text';

editor.importContent(markdown, 'markdown');

const warnings = editor.getExportWarnings('markdown');
// Non-empty when export would be lossy or blocked (e.g. native editor tables).
// Does not throw — use this to warn users before calling exportContent.
for (const w of warnings) {
  console.warn(w.message);
}

const output = editor.exportContent('markdown');

getExportWarnings only applies to markdown and mdx. It reports lossy formatting (color, align, font) and blocks native editor tables. exportContent('markdown') throws SerializationError when a native table is present — use exportContent('html') for table content. See serialization.md for the full limitations list.

const html = editor.exportContent('html'); // always available for editor content

What you get

| Area | Notes | |------|-------| | Themes | snow, bubble, slate, dawn (CSS included) | | Modules | clipboard, keyboard, history, toolbar, table, syntax, image resize | | Formats | bold, lists, headers, links, code blocks, tables, images, video, formulas | | ChangeSet | JSON ops with compose, diff, transform, invert | | Serialization | HTML, Markdown, MDX, JSON via ChangeSet |

Packages

The lextrix npm package bundles everything below. You only install lextrix unless you are contributing to the monorepo.

| Package | Role | |---------|------| | lextrix | Published bundle (ESM + UMD + CSS) | | lextrix-change | ChangeSet / OT | | lextrix-dom | Blots, registry, DOM sync | | lextrix-core | Editor shell, selection | | lextrix-formats | Built-in formats | | lextrix-modules | Clipboard, keyboard, toolbar, … | | lextrix-serialize | Headless import/export | | lextrix-ui | Toolbar widgets | | lextrix-themes | Theme CSS |

Architecture: overview.md

Extending

React / Next.js: Lextrix is a class mounted with useEffect — not a JSX component. See frameworks.md.

Register formats from npm:

import Lextrix, { lxrPath } from 'lextrix';

Lextrix.register({ [lxrPath.format('my-format')]: MyFormatBlot });

Format helpers (defineInlineTagFormat, …) require the monorepo. Guides: formats · modules · configuration

Development

git clone https://github.com/rishureetesh/lextrix.git
cd lextrix
npm install
npm run build
npm run dev          # full playground at http://localhost:5173 (packages/demo)
npm test

Contributing: .github/CONTRIBUTING.md · .github/DEVELOPMENT.md

License

MIT © Reetesh Kumar · iamreetesh.com. See LICENSE. Runtime dependencies: NOTICE.md.