Getting Started

Install Lextrix, import a theme, wire up events, and render your first editor.

Try it: Live playground — themes, import/export, and all modules in the browser.

New here? Follow the Evaluation guide for a linear install → export walkthrough.

Install

Bash

npm install lextrix

JavaScript

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

Import	Purpose
`lextrix`	Full editor — ESM (`lextrix.esm.js`) for bundlers, UMD (`lextrix.js`) for script tags
`lextrix/core`	Core-only bundle (no formats/themes)
`lextrix/lextrix.css`	Base editor styles
`lextrix/snow.css`	Snow theme
`lextrix/bubble.css`	Bubble theme
`lextrix/slate.css`	Dark slate theme
`lextrix/dawn.css`	Warm dawn theme

Named imports (ChangeSet, registerSerializer, lxrPath, …) work from lextrix in bundlers (2.0.1+). Script-tag UMD exposes window.Lextrix only.

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

React / Next.js: @lextrix/react · Frameworks · Evaluation · Cookbook

Script-tag setup (npm paths or CDN): Framework integration — Script tag.

Snow theme

HTML

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

JavaScript

const editor = new Lextrix('#editor', {
  theme: 'snow',
  placeholder: 'Start writing…',
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
      ['clean'],
    ],
    imageResize: true,
  },
});
 
editor.setContents([
  { insert: 'Hello Lextrix\n', attributes: { header: 1 } },
  { insert: 'Select an image and drag the corner handle to resize.\n' },
]);

Bubble theme

JavaScript

const editor = new Lextrix('#editor', {
  theme: 'bubble',
  modules: {
    toolbar: [
      ['bold', 'italic', 'link'],
      [{ header: 1 }, { header: 2 }],
    ],
  },
});

Read-only

JavaScript

const editor = new Lextrix('#editor', {
  theme: 'snow',
  readOnly: true,
});

Getting content

JavaScript

const json = editor.getContents();       // ChangeSet
const html = editor.exportContent('html');
const text = editor.getText();

Listening to changes

JavaScript

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

See Configuration for modules, upload handlers, and format whitelists.

Getting Started

Install Lextrix, import a theme, wire up events, and render your first editor.

Try it: Live playground — themes, import/export, and all modules in the browser.

New here? Follow the Evaluation guide for a linear install → export walkthrough.

Install

Bash

npm install lextrix

JavaScript

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

Import	Purpose
`lextrix`	Full editor — ESM (`lextrix.esm.js`) for bundlers, UMD (`lextrix.js`) for script tags
`lextrix/core`	Core-only bundle (no formats/themes)
`lextrix/lextrix.css`	Base editor styles
`lextrix/snow.css`	Snow theme
`lextrix/bubble.css`	Bubble theme
`lextrix/slate.css`	Dark slate theme
`lextrix/dawn.css`	Warm dawn theme

Named imports (ChangeSet, registerSerializer, lxrPath, …) work from lextrix in bundlers (2.0.1+). Script-tag UMD exposes window.Lextrix only.

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

React / Next.js: @lextrix/react · Frameworks · Evaluation · Cookbook

Script-tag setup (npm paths or CDN): Framework integration — Script tag.

Snow theme

HTML

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

JavaScript

const editor = new Lextrix('#editor', {
  theme: 'snow',
  placeholder: 'Start writing…',
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
      ['clean'],
    ],
    imageResize: true,
  },
});
 
editor.setContents([
  { insert: 'Hello Lextrix\n', attributes: { header: 1 } },
  { insert: 'Select an image and drag the corner handle to resize.\n' },
]);

Bubble theme

JavaScript

const editor = new Lextrix('#editor', {
  theme: 'bubble',
  modules: {
    toolbar: [
      ['bold', 'italic', 'link'],
      [{ header: 1 }, { header: 2 }],
    ],
  },
});

Read-only

JavaScript

const editor = new Lextrix('#editor', {
  theme: 'snow',
  readOnly: true,
});

Getting content

JavaScript

const json = editor.getContents();       // ChangeSet
const html = editor.exportContent('html');
const text = editor.getText();

Listening to changes

JavaScript

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

See Configuration for modules, upload handlers, and format whitelists.