mathlive

v0.108.2

Published

23 days ago

A web component for math input

0High
0Medium
0Low

math editor javascript math-editing cortex compute engine virtual keyboard math keyboard latex tex mathjax katex mathquill

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

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Components at a Glance

🚀 Quick Start

Framework Guides

📖 Documentation

FAQ

Related Projects

💬 Contact Us

📃 License