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
|
|
|
|
<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"orformat="math-json" - Expose a
modeattribute (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>Install and import the component bundle:
npm install mathliveimport '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>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.
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.
- MathJSON (on GitHub)
- A lightweight data interchange format for mathematical notation.
- Compute Engine (on GitHub)
- Performs numeric and symbolic calculations on MathJSON expressions.
- Chat with the MathLive GPT
- Join our Discord server
- Email [email protected]
This project is licensed under the MIT License.
