A web component for math input
npm install 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

src="assets/screenshots/popover.png"> | src="assets/screenshots/virtualKeyboard.png"> |
src="assets/screenshots/loop-eqn.png"> | |
- 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 calledrenderMathInDocument().
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`
Install and import the component bundle:
`bash`
npm install mathlive
`javascript`
import 'mathlive';
Render a mathfield:
`html`
Render static math without the editor chrome:
`html`
{"kind":"Multiply","args":["x",{"kind":"Power","base":"y","exponent":2}]}
Or load MathLive from a CDN:
`html``
- React
- Svelte
- Interacting with a mathfield
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.
- Chat with the MathLive GPT
- Join our Discord server
- Email arno@arno.org
This project is licensed under the MIT License.