hub / github.com/arnog/mathlive

github.com/arnog/mathlive @v0.110.0

repository ↗ · DeepWiki ↗ · release v0.110.0 ↗ · + Follow

1,600 symbols 4,442 edges 195 files 270 documented · 17% 1 cross-repo links

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

<img alt="MathLive" src="https://github.com/arnog/mathlive/raw/v0.110.0/assets/mathlive-1.png?raw=true">

MathLive

Web components for math input, display, and accessibility.

MathLive ships batteries-included UI components that bring TeX-quality math to the web. Drop a mathfield on the page, wire up the events you care about, and MathLive handles rendering, editing, speech, and keyboard UX for you.

800+ built-in LaTeX commands with high-fidelity typesetting
Mobile-ready virtual keyboards and physical keyboard shortcuts
Export/import as LaTeX, MathML, ASCIIMath, Typst, or MathJSON
Screen-reader friendly with math-to-speech and ARIA labels
Highly customizable UI, themes, macros, commands, and behaviors

MathLive demo screenshot

Components at a Glance

<math-field> - The flagship math editor. Provides text-area like APIs (value, selection, executeCommand()), emits input and change events, and exposes a full virtual keyboard UI with custom layouts.

<math-span> - Inline, lightweight renderer for static math. Ideal for embedding expressions inside paragraphs without initializing a full mathfield.

<math-div> - Block-level renderer for static math and display equations. Useful for articles, assessments, or anywhere you previously called renderMathInDocument().

Both static components:

Accept LaTeX by default and support format="ascii-math" or format="math-json"
Expose a mode attribute (textstyle/displaystyle)
Lazy-load shared fonts once, defer rendering until visible via Intersection Observer, and auto-generate ARIA labels with speech-friendly text
Provide an imperative render() method when you need to update content programmatically

<math-span>e^{i\pi} + 1 = 0</math-span>
<math-div format="ascii-math">int_0^oo e^(-x^2) dx</math-div>

🚀 Quick Start

Install and import the component bundle:

npm install mathlive

import 'mathlive';

Render a mathfield:

<!DOCTYPE html>
<html lang="en-US">
  <body>
    <math-field virtual-keyboard-mode="auto" smart-fence>f(x)=x+1</math-field>
  </body>
</html>

Render static math without the editor chrome:

<math-span id="area">A = \pi r^2</math-span>
<math-div format="math-json" mode="displaystyle">
  {"kind":"Multiply","args":["x",{"kind":"Power","base":"y","exponent":2}]}
</math-div>
<script type="module">
  const formula = document.getElementById('area');
  formula.textContent = 'A = \\pi r^2';
  await formula.render();
</script>

Or load MathLive from a CDN:

<head>
  <script defer src="https://cdn.jsdelivr.net/npm/mathlive"></script>
</head>

Framework Guides

📖 Documentation

Comprehensive guides cover customization, command execution, macros, keyboard shortcuts, speech output, static rendering, and more. Browse everything on MathLive.io and dig into the Mathfield API reference for full typings and method docs.

FAQ

Q: When is the next release?

MathLive follows a semi-annual cadence with major drops around June and January, plus patch releases for regression fixes. Sponsor requests or community pull requests can trigger out-of-band releases when needed.

Related Projects

MathJSON (on GitHub): A lightweight data interchange format for mathematical notation.
Compute Engine (on GitHub): Performs numeric and symbolic calculations on MathJSON expressions.

💬 Contact Us

Chat with the MathLive GPT
Join our Discord server
Email arno@arno.org

📃 License

This project is licensed under the MIT License.

Extension points exported contracts — how you extend this code

VirtualKeyboardInterface (Interface)

(no doc) [4 implementers]

src/public/virtual-keyboard.ts

BoxInterface (Interface)

(no doc) [2 implementers]

src/core/types.ts

MenuListState (Interface)

(no doc) [2 implementers]

src/ui/menu/private-types.ts

KeyboardDelegateInterface (Interface)

(no doc) [1 implementers]

src/editor/keyboard.ts

Window (Interface)

(no doc)

src/formats/atom-to-speakable-text.ts

Mathfield (Interface)

(no doc) [4 implementers]

src/public/mathfield.ts

ContextInterface (Interface)

(no doc) [1 implementers]

src/core/types.ts

RootMenuState (Interface)

(no doc) [2 implementers]

src/ui/menu/private-types.ts

Core symbols most depended-on inside this repo

called by 186

src/editor-model/model-private.ts

offsetOf

called by 174

src/editor-model/model-private.ts

defineFunction

called by 129

src/latex-commands/definitions-utils.ts

src/addons/definitions-metadata.ts

src/virtual-keyboard/proxy.ts

Shape

Method 782

Function 661

Class 124

Interface 33

Languages

TypeScript100%

Modules by API surface

src/public/mathfield-element.ts112 symbols

src/editor-mathfield/mathfield-private.ts82 symbols

src/core/atom-class.ts66 symbols

src/core/parser.ts58 symbols

src/virtual-keyboard/virtual-keyboard.ts46 symbols

src/editor-model/model-private.ts45 symbols

src/atoms/array.ts38 symbols

src/ui/menu/menu-list.ts32 symbols

src/virtual-keyboard/utils.ts28 symbols

src/virtual-keyboard/proxy.ts28 symbols

src/public/math-static-elements.ts28 symbols

src/core/box.ts28 symbols

Used by 1 indexed graphs manifest dependencies, hub-wide

github.com/TriliumNext/Trilium

For agents

$ claude mcp add mathlive \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact