wikistxr

A lightweight and fast library for Wikitext that has a syntax highlighter and editor written in TypeScript.

Features

• Very fast!
• Easily portable to every modern browser environment
• Wikitext-aware tokenization (templates, links, tables, comments, tags, magic words, etc.)
• Configurable protocols, redirect keywords, extension tags, etc.
• HTML output with granular CSS classes (getDefaultStyles() provided)
• Incremental mode caches line tokens and state for fast live editing

Installation

npm install wikistxr

or

<script src="https://cdn.jsdelivr.net/npm/wikistxr@latest/dist/index.min.js"></script>

Two Modes

WikitextHighlighter

Static, full-pass syntax highlighting

• Tokenizes entire wikitext input in one pass
• Renders to HTML string with CSS classes
• No DOM management or cursor tracking
• Ideal for read-only display like code previews

import { WikitextHighlighter } from "wikistxr";

const highlighter = new WikitextHighlighter();
const html = highlighter.highlight(wikitextString);
container.innerHTML = html;

Highlighter runs way faster for most files, however, it sucks at rerendering. Which leads us to...

WikitextEditor (experimental)

Incremental, live editing with DOM patching

• Extends WikitextHighlighter with editing capabilities
• Caches tokenizer state and tokens per line
• A more robust content tracking in general
• Ideal for interactive editors, real-time preview, or large documents

import { WikitextEditor } from "wikistxr";

const editor = new WikitextEditor();
editor.attach(editableDiv); // Turns div editable and sets up event listeners
editor.update(wikitextString); // Initial render with syntax highlighting

That being said... I still recommend using WikitextHighlighter with an actual editor like Monaco.

You can find a live demo here.

Configuration

Both classes accept the same configuration options:

const config = {
  urlProtocols: /^(?:http|https|mailto)/i,
  redirectKeywords: ["REDIRECT", "RINVIA"],
  extensionTags: ["nowiki", "ref", "gallery"],
  contentPreservingTags: ["nowiki", "pre", "tabber"],
};

const highlighter = new WikitextHighlighter(config);
const editor = new WikitextEditor(config);

To add new styles:

const styleTag = document.createElement("style");
styleTag.textContent = WikitextEditor.getDefaultStyles();
document.head.appendChild(styleTag);

Demo

Run the bundled demo (Vite):

npm install
npm run build && npm run preview

# npm run dev only partially works,
# since the demo uses the built dist
# instead of src to mimic real usage.

Open the displayed URL to switch between Highlighter and Editor modes, load sample snippets, and verify highlighting.

Building

npm run build

Outputs CJS + ESM bundles under dist/.

License

MIT