Getting Started — Lextrix Docs

Install Lextrix 2.x, import a theme, and render your first editor in under five minutes.

Install Lextrix 2.x from npm, pick a theme, and create an editor instance. The published bundle includes built-in serializers for HTML, Markdown, MDX, and JSON.

Install

Bash

npm install lextrix

Import the editor and a theme stylesheet:

JavaScript

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

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

Available exports

Import	Purpose
`lextrix`	Full editor bundle
`lextrix/core`	Core-only (no built-in formats/themes)
`lextrix/lextrix.css`	Base editor styles
`lextrix/snow.css`	Snow theme (default toolbar)
`lextrix/bubble.css`	Floating bubble toolbar
`lextrix/slate.css`	Dark slate theme
`lextrix/dawn.css`	Warm dawn theme

Minimal setup

HTML

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

JavaScript

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' },
]);

Read content back

JavaScript

const changeSet = editor.getContents();      // ChangeSet object
const html = editor.exportContent('html');   // semantic HTML
const md = editor.exportContent('markdown'); // Markdown string
const text = editor.getText();               // plain text

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

Import Markdown or HTML

JavaScript

editor.importContent('# Title\n\n**bold** paragraph.', 'markdown');
editor.importContent('<p>Hello <strong>world</strong></p>', 'html');

Native editor tables cannot export to Markdown/MDX — use exportContent('html') instead. See Serialization.

Listen for changes

JavaScript

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

Next steps

Serialization — HTML, Markdown, MDX, JSON import/export
React Integration — mount Lextrix in a React app
Plugin System — extend with custom modules

For monorepo contributors, see the architecture guide on GitHub.

Install Lextrix 2.x from npm, pick a theme, and create an editor instance. The published bundle includes built-in serializers for HTML, Markdown, MDX, and JSON.

Install

Bash

npm install lextrix

Import the editor and a theme stylesheet:

JavaScript

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

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

Available exports

Import	Purpose
`lextrix`	Full editor bundle
`lextrix/core`	Core-only (no built-in formats/themes)
`lextrix/lextrix.css`	Base editor styles
`lextrix/snow.css`	Snow theme (default toolbar)
`lextrix/bubble.css`	Floating bubble toolbar
`lextrix/slate.css`	Dark slate theme
`lextrix/dawn.css`	Warm dawn theme

Minimal setup

HTML

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

JavaScript

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' },
]);

Read content back

JavaScript

const changeSet = editor.getContents();      // ChangeSet object
const html = editor.exportContent('html');   // semantic HTML
const md = editor.exportContent('markdown'); // Markdown string
const text = editor.getText();               // plain text

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

Import Markdown or HTML

JavaScript

editor.importContent('# Title\n\n**bold** paragraph.', 'markdown');
editor.importContent('<p>Hello <strong>world</strong></p>', 'html');

Native editor tables cannot export to Markdown/MDX — use exportContent('html') instead. See Serialization.

Listen for changes

JavaScript

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

Next steps

Serialization — HTML, Markdown, MDX, JSON import/export
React Integration — mount Lextrix in a React app
Plugin System — extend with custom modules

For monorepo contributors, see the architecture guide on GitHub.