MathLive Examples

Basic

With a few lines of code you can add interactive mathfields 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.

Try it  View source 

Latex

You can get Latex from a mathfield, but you can also set Latex into a mathfield, and you can even keep both in sync

With the help of a third-party library, you can also output to an image

Try it  View source 

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 key bindings.

Try it  View source 

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.

Try it  View source 

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.

Try it  View source 

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.

Try it  View source 

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.

Try it  View source 

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.

Try it  View source 

Peformance

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

Try it  View source