MathLive Examples

Basic

With a few lines of code you can add interactive math fields to your web page.

Use your keyboard to type math symbols. They will be typeset using the TeX math layout rules.

Press alt/option V to add a root. Use ^ for exponents.

Edit and navigate formulas using arrow keys. Most of the keyboard shortcuts you would use to edit a text field work as well.

Get started with this basic example.

Shortcuts

To speed up math entry, you can define some inline shortcuts for common functions or operations for your app, on top of the standard built-in ones (like "pi", "cos", etc...)

You can also intercept keystrokes to implement keyboard shortcuts.

Multiple Mathfields

You can have multiple mathfields on the page. They are navigable and accessible.

You can customize how each mathfield behaves with regard to their onscreen virtual keyboard: always off, if you want to implement your own UI, manual, if you want to display a toggle to show or hide the keyboard, or onfocus so that the keyboard appears as soon as the mathfield is focused.

VueJS

MathLive uses native Javascript and does not depend on third-party libraries

You can use it with the framewok of your choice. This example provides a wrapper for VueJS. Others are available for React.

MathJS

The MathJS library provides an extensive set of numeric and symbolic calculations

MathLives provides as output a Math JSON data structure that can be passed to MathJS to perform calculations.

Speech

MathLive has built-in support for speech output, including a "karaoke" mode (read aloud).

The conversion to speech can be done using the built-in MathLive rule engine. For more comprehensive configuration, and to support additional languages, the SRE from Volker Sorge can also be used.

The native speech synthesizer can be used, or for higher quality output, the Amazon speech synthesizer.

Virtual Keyboards

On-screen virtual keyboards make entry of math symbols easier.

They are a necesity on mobile devices, but can be convenient on desktops and laptops as well.

MathLive provides several built-in keyboards, but you can also define your own depending on your needs.

Peformance

MathLive is fast and its equation display engine can be used to render math content, including dynamically updating one.