MathLive

Web components for math input, display, and accessibility.

![Maintenance]()

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

style='margin:15px; box-shadow: 0px 5px 15px #000; border: 1px solid #eee' src="assets/screenshots/popover.png">	style='margin:15px; box-shadow: 0px 5px 15px #000; border: 1px solid #eee' src="assets/screenshots/virtualKeyboard.png">
style='margin:15px; box-shadow: 0px 5px 15px #000; border: 1px solid #eee' src="assets/screenshots/loop-eqn.png">

Components at a Glance

- 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.

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

- 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

``html
e^{i\pi} + 1 = 0
int_0^oo e^(-x^2) dx
`

🚀 Quick Start

Install and import the component bundle:

`bash
npm install mathlive
`

`javascript
import 'mathlive';
`

Render a mathfield:

`html



f(x)=x+1


`

Render static math without the editor chrome:

`html
A = \pi r^2

{"kind":"Multiply","args":["x",{"kind":"Power","base":"y","exponent":2}]}


`

Or load MathLive from a CDN:

`html



``

$3

- React
- Svelte
- Interacting with a mathfield

📖 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.