MathLive
Web components for math input, display, and accessibility.
[]()
[](https://raw.githubusercontent.com/arnog/mathlive/master/LICENSE.txt)
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
**``** - 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
```
### Framework Guides
- [React](https://cortexjs.io/mathfield/guides/react/)
- [Svelte](https://cortexjs.io/mathfield/guides/svelte/)
- [Interacting with a mathfield](https://cortexjs.io/mathfield/guides/interacting/)
## 📖 Documentation
Comprehensive guides cover customization, command execution, macros, keyboard
shortcuts, speech output, static rendering, and more. Browse everything on
[MathLive.io](https://mathlive.io/) and dig into the
[Mathfield API reference](https://mathlive.io/mathfield/api/) 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](https://chatgpt.com/g/g-8YgEfR7ig-mathlive-gpt)
- Join our [Discord server](https://discord.gg/yhmvVeJ4Hd)
- Email [arno@arno.org](mailto:arno@arno.org)
## 📃 License
This project is licensed under the [MIT License](LICENSE.txt).
