Linear path from playground to install, export, and built-in modules — ideal for first-time evaluation.

Evaluation guide

A linear path for trying Lextrix for the first time. No setup beyond a bundler or static HTML page.

Using React or Next.js? Skip to Framework integration after step 5.

1. Try the playground

Open the live playground in your browser. No install required — edit content, switch themes, and try import/export panels.

2. Install Lextrix

Bash

npm install lextrix

Install only the lextrix package. Everything you need for a full editor ships in that bundle.

3. Import CSS

Lextrix does not inject styles. Import a theme in your app entry:

JavaScript

import 'lextrix/snow.css';

Other themes: lextrix/bubble.css, lextrix/slate.css, lextrix/dawn.css.

4. Create an editor

HTML

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

JavaScript

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

You should see a toolbar and an editable area immediately.

5. Load content

From ChangeSet JSON (same shape as getContents()):

JavaScript

editor.setContents([
  { insert: 'Hello Lextrix\n', attributes: { header: 1 } },
  { insert: 'Edit rich text in the browser.\n' },
]);

From Markdown or HTML:

JavaScript

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

6. Export content

JavaScript

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

Before Markdown or MDX export, check for unsupported or lossy content:

JavaScript

const warnings = editor.getExportWarnings('markdown');
for (const w of warnings) {
  console.warn(w.message);
}
const md = editor.exportContent('markdown');

Native editor tables cannot export to Markdown/MDX — export throws SerializationError. Use exportContent('html') instead. See Serialization for the full limitations list.

Enable the opt-in imageResize module and include image in the toolbar (or insert an image programmatically). Select a single image — a corner handle appears; drag to resize. Aspect ratio is preserved.

JavaScript

const editor = new Lextrix('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic'],
      ['link', 'image'],
      ['clean'],
    ],
    imageResize: {
      minWidth: 48,
      maxWidth: null, // null = editor width
    },
  },
});
 
// Insert via toolbar, drag-and-drop, or API:
editor.insertEmbed(0, 'image', 'https://example.com/photo.jpg');

Programmatic resize (sets the same width / height attributes as the handle):

JavaScript

editor.formatText(imageIndex, 1, { width: '400', height: '300' }, 'user');

Does not apply to video or other embeds. Details: Configuration — Image resize · API reference — imageResize

8. Optional modules

These features are opt-in or configured via modules. Full API: API reference — Modules.

Undo / redo

Always available via editor.history. Keyboard: Ctrl+Z / Ctrl+Shift+Z.

JavaScript

editor.history.undo();
editor.history.redo();

Image upload

Override the default base64 handler to upload to your server:

JavaScript

modules: {
  toolbar: [['bold', 'italic'], ['link', 'image'], ['clean']],
  uploader: {
    mimetypes: ['image/png', 'image/jpeg', 'image/webp'],
    async handler(range, files) {
      for (const file of files) {
        const body = new FormData();
        body.append('file', file);
        const res = await fetch('/api/upload', { method: 'POST', body });
        const { url } = await res.json();
        this.lextrix.insertEmbed(range.index, 'image', url, 'user');
        range.index += 1;
      }
    },
  },
}

Toolbar image and drag-and-drop both use this handler.

Syntax highlighting

Load highlight.js first, then enable the module:

JavaScript

modules: {
  toolbar: [['bold', 'italic'], ['code-block'], ['clean']],
  syntax: {
    hljs: window.hljs,
    languages: [{ key: 'javascript', label: 'JavaScript' }],
  },
}

Tables

JavaScript

modules: {
  toolbar: [['bold', 'italic'], ['table'], ['clean']],
  table: true,
}
 
editor.getModule('table')?.insertTable(3, 4);

Remember: native tables cannot export to Markdown/MDX — use HTML export.

9. React / Next.js next steps

Lextrix is a class, not a React component. Mount it in useEffect, call editor.destroy() on unmount, and import theme CSS on the client.

Framework integration — React, Next.js App Router, Vue, script tag
DOM mounting — toolbar placement and cleanup when remounting
Runnable starters: vite-vanilla · vite-react

10. Troubleshooting

Symptom	Fix
Unstyled editor	Import `lextrix/snow.css` (or another theme)
`document is not defined`	Client-only — see Frameworks
Duplicate toolbars	Call `editor.destroy()` on unmount — DOM mounting
Markdown export throws	Native table in document — use HTML export or check Serialization
No image resize handle	Enable `modules.imageResize` and select a single image — Image resize
Code blocks not highlighted	Load highlight.js and enable `modules.syntax` — API reference
Upload does nothing	Check `uploader.mimetypes` matches file type — API reference

More recipes: Cookbook · Full API: API reference

What to read next

Goal	Guide
Copy-paste recipes	Cookbook
Save on change, uploads, tables	Cookbook
Image resize	Configuration — Image resize · API reference
Upload, syntax, tables	Optional modules · API reference — Modules
Custom serializers	API reference — registerSerializer
All import/export formats	Serialization
Module and toolbar options	Configuration

Evaluation guide

A linear path for trying Lextrix for the first time. No setup beyond a bundler or static HTML page.

Using React or Next.js? Skip to Framework integration after step 5.

1. Try the playground

Open the live playground in your browser. No install required — edit content, switch themes, and try import/export panels.

2. Install Lextrix

Bash

npm install lextrix

Install only the lextrix package. Everything you need for a full editor ships in that bundle.

3. Import CSS

Lextrix does not inject styles. Import a theme in your app entry:

JavaScript

import 'lextrix/snow.css';

Other themes: lextrix/bubble.css, lextrix/slate.css, lextrix/dawn.css.

4. Create an editor

HTML

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

JavaScript

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

You should see a toolbar and an editable area immediately.

5. Load content

From ChangeSet JSON (same shape as getContents()):

JavaScript

editor.setContents([
  { insert: 'Hello Lextrix\n', attributes: { header: 1 } },
  { insert: 'Edit rich text in the browser.\n' },
]);

From Markdown or HTML:

JavaScript

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

6. Export content

JavaScript

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

Before Markdown or MDX export, check for unsupported or lossy content:

JavaScript

const warnings = editor.getExportWarnings('markdown');
for (const w of warnings) {
  console.warn(w.message);
}
const md = editor.exportContent('markdown');

Native editor tables cannot export to Markdown/MDX — export throws SerializationError. Use exportContent('html') instead. See Serialization for the full limitations list.

7. Image resize

JavaScript

const editor = new Lextrix('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic'],
      ['link', 'image'],
      ['clean'],
    ],
    imageResize: {
      minWidth: 48,
      maxWidth: null, // null = editor width
    },
  },
});
 
// Insert via toolbar, drag-and-drop, or API:
editor.insertEmbed(0, 'image', 'https://example.com/photo.jpg');

Programmatic resize (sets the same width / height attributes as the handle):

JavaScript

editor.formatText(imageIndex, 1, { width: '400', height: '300' }, 'user');

Does not apply to video or other embeds. Details: Configuration — Image resize · API reference — imageResize

8. Optional modules

These features are opt-in or configured via modules. Full API: API reference — Modules.

Undo / redo

Always available via editor.history. Keyboard: Ctrl+Z / Ctrl+Shift+Z.

JavaScript

editor.history.undo();
editor.history.redo();

Image upload

Override the default base64 handler to upload to your server:

JavaScript

modules: {
  toolbar: [['bold', 'italic'], ['link', 'image'], ['clean']],
  uploader: {
    mimetypes: ['image/png', 'image/jpeg', 'image/webp'],
    async handler(range, files) {
      for (const file of files) {
        const body = new FormData();
        body.append('file', file);
        const res = await fetch('/api/upload', { method: 'POST', body });
        const { url } = await res.json();
        this.lextrix.insertEmbed(range.index, 'image', url, 'user');
        range.index += 1;
      }
    },
  },
}

Toolbar image and drag-and-drop both use this handler.

Syntax highlighting

Load highlight.js first, then enable the module:

JavaScript

modules: {
  toolbar: [['bold', 'italic'], ['code-block'], ['clean']],
  syntax: {
    hljs: window.hljs,
    languages: [{ key: 'javascript', label: 'JavaScript' }],
  },
}

Tables

JavaScript

modules: {
  toolbar: [['bold', 'italic'], ['table'], ['clean']],
  table: true,
}
 
editor.getModule('table')?.insertTable(3, 4);

Remember: native tables cannot export to Markdown/MDX — use HTML export.

9. React / Next.js next steps

Lextrix is a class, not a React component. Mount it in useEffect, call editor.destroy() on unmount, and import theme CSS on the client.

Framework integration — React, Next.js App Router, Vue, script tag
DOM mounting — toolbar placement and cleanup when remounting
Runnable starters: vite-vanilla · vite-react

10. Troubleshooting

Symptom	Fix
Unstyled editor	Import `lextrix/snow.css` (or another theme)
`document is not defined`	Client-only — see Frameworks
Duplicate toolbars	Call `editor.destroy()` on unmount — DOM mounting
Markdown export throws	Native table in document — use HTML export or check Serialization
No image resize handle	Enable `modules.imageResize` and select a single image — Image resize
Code blocks not highlighted	Load highlight.js and enable `modules.syntax` — API reference
Upload does nothing	Check `uploader.mimetypes` matches file type — API reference

More recipes: Cookbook · Full API: API reference

What to read next

Goal	Guide
Copy-paste recipes	Cookbook
Save on change, uploads, tables	Cookbook
Image resize	Configuration — Image resize · API reference
Upload, syntax, tables	Optional modules · API reference — Modules
Custom serializers	API reference — registerSerializer
All import/export formats	Serialization
Module and toolbar options	Configuration

Evaluation Guide

Evaluation guide

1. Try the playground

2. Install Lextrix

3. Import CSS

4. Create an editor

5. Load content

6. Export content

7. Image resize

8. Optional modules

Undo / redo

Image upload

Syntax highlighting

Tables

9. React / Next.js next steps

10. Troubleshooting

What to read next

Evaluation Guide

Evaluation guide

1. Try the playground

2. Install Lextrix

3. Import CSS

4. Create an editor

5. Load content

6. Export content

7. Image resize

8. Optional modules

Undo / redo

Image upload

Syntax highlighting

Tables

9. React / Next.js next steps

10. Troubleshooting

What to read next