MathLive is a powerful web component that provides an easy-to-use interface for editing math formulas.
With over 800 built-in LaTeX commands, MathLive renders beautiful, TeX-quality typesetting.
It's designed for mobile devices with an extensive set of virtual keyboards for math input, and is compatible with screen readers, including custom math-to-speech support for improved accessibility.
MathLive outputs to LaTeX, MathML, ASCIIMath, and MathJSON formats, making it incredibly versatile.
And the best part? It's easy to customize to your needs!
|
|
|
Using MathLive is easy! Simply add a <math-field> tag to your page. It
initializes automatically and works just like a <textarea> or <button>
element. You can manipulate the mathfield using methods of the element and
listen for events to be notified when its internal state changes.
npm install mathlive
import 'mathlive';
<!DOCTYPE html>
<html lang="en-US">
<body>
<math-field>f(x)=</math-field>
</body>
</html>
You can also add it using CDN
<head>
<script src="https://unpkg.com/mathlive"></script>
</head>
Check documentation for React and interaction with Mathfield.
MathLive has an extensive set of documentation to help you get started, including guides on interacting with a mathfield, customizing it, executing commands, defining custom LaTeX macros, managing inline and keyboard shortcuts, controlling speech output, and displaying static math formulas. You can find all of these guides on the CortexJS.io website.
In addition to the guides, you can also find reference documentation of the MathLive API on the MathLive SDK page.
Q: When is the next release?
MathLive follows a semi-annual release cycle, with major releases typically scheduled for June and January. These may be followed by patch releases to address any issues that arise shortly after deployment. Additionally, an out-of-band release can be made if requested by a sponsor or if a community member submits a pull request and requests a release to include their contribution.
This project is licensed under the MIT License.
0.104.0 2025-02-08
As a reminder, if you are handling untrusted input, you should consider using
the MathfieldElement.createHTML() method to sanitize content. The
createHTML() method follows the recommendations from the
Trusted Type specification.
For example, using the DOMPurify library (there are other HTML sanitizers available):
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.3/purify.min.js"></script>
MathfieldElement.createHTML = (html) => DOMPurify.sanitize(html);
security advisory
Untrusted input could be used to inject arbitrary HTML or JavaScript code in a
page using a mathfield or math content rendered by the library, if the content
included an \htmlData{} command with maliciously crafted input and no DOM
sanitizer was used.
The content of the \htmlData{} command is now sanitized and the 🚫 emoji is
displayed instead in the mathfield if the content is unsafe. When using
convertLatexToMarkup(), an exception is thrown.
The \href{}{} command now only allows URLs with the http or https
protocol.
Generate only standard trigonometric functions, i.e. those available in the
amsmath package. Use \operatorname{} for the others. The standard commands
are:
\arccos\arcsin\arctan\arg\cos\cosh\cot\coth\csc\sec\sin\sinh\tan\tanhAdded support for \dddot and \ddddot commands.
#2573 The \operatorname{} command when round-tripped would incldue an
extraneous \mathrm{} command.
#2132, #2548 Improved handling of multi-line mathfields. To use a multi-line mathfield, include a multi-line environment:
\displaylines{}: single column of left-aligned equationsgather: single column of centered equationsmultline: centered equations with the first line aligned left and the last
line aligned to the rightalign: two columns, the first column right-aligned, the second column
left-aligned; used for one equation per linesplit: two columns of equations, the first column right-aligned, the
second column left-aligned; used for a single equation split over multiple
linesFor example:
<math-field>\displaylines{x=1 \\y = 2}</math-field>
<math-field>\begin{align}
f(0) &= 1 \\
f(x + 1) &= f(x-1) + f(x)
\end{align}
</math-field>
When in a multi-line environment, the Return key will move to the next line. The Backspace key will delete the current line if the cursor is at the beginning of the line. Note that no placeholder is inserted on a new line: the line is simply blank.
The Add Row Before, Add Row After, Add Column Before, Add Column After, Delete Row and Delete Columns commands are available in the context menu when the cursor is inside a matrix. They are not available in multi-line environments.
#2574 The commands \coloneq, \Coloneq, \Coloneqq, \eqcolon and
\Eqcolon were mapped to incorrect symbols (some of them used obsolete
definitions of those commands from the mathtools package that changed in the
Summer of 2022). They are now correctly mapped to the corresponding symbols.
#2576 The command \perp was mapped to the wrong symbol (U+22A5). It is
now mapped to the correct symbol (U+27C2)
Improved ASCIIMath serialization.
FAQs
A web component for math input
The npm package mathlive receives a total of 50,989 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 0 open source maintainers collaborating on the project.
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.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.