Company News
Socket Has Acquired Secure Annex
Socket has acquired Secure Annex to expand extension security across browsers, IDEs, and AI tools.
By Feross AboukhadijehĀ - Ā Apr 28, 2026
š Big News:Socket Has Acquired Secure Annex.Learn More ā
MathLive
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
|
|
|
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"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>
š 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.
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.
FAQs
A web component for math input
The npm package mathlive receives a total of 119,823 weekly downloads. As such, mathlive popularity was classified as popular.
We found that mathlive demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 1 open source maintainer collaborating on the project.
Package last updated on 29 Apr 2026
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
/Security News
73 Open VSX Sleeper Extensions Linked to GlassWorm Show New Malware Activations
Socket is tracking cloned Open VSX extensions tied to GlassWorm, with several updated from benign-looking sleepers into malware delivery vehicles.
By Socket Research TeamĀ - Ā Apr 25, 2026
Product
Introducing Reachability for PHP
Reachability analysis for PHP is now available in experimental, helping teams identify which vulnerabilities are actually exploitable.
By Benjamin BarslevĀ - Ā Apr 24, 2026