Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Basic Example

This example shows how to interact with a MathLive math field.

It uses the minified version of the MathLive library.

Load the stylesheets

Load both the "core" and regular stylesheet. The "core" stylesheet contains only the basic to display a simple formula. You can lazily load the regular stylesheet, but you will need both to display correctly formulas.

<link rel="stylesheet" href="../../dist/mathlive.core.css">
<link rel="stylesheet" href="../../dist/mathlive.css">

Load the JavaScript library

Preferably at the end of your page, before the </body> tag, to avoid blocking rendering.

<script src="../../dist/mathlive.js"></script>

Interact with a math field

Create a math field from an element on page. Here we used a <div> element with an ID of mf. If the element has any textual content, it will be used as the initial content of the math field.

Now is also a good time to customize the math field. Here, we'll provide a handler to be notified when the content of the math field has changed, for example when the user types something in the field.

    const mf = MathLive.makeMathField('mf', {
        onContentDidChange: updateOutput

We'll process that notification by extracting a LaTeX representation from the math field, and displaying it in an output element.

    function updateOutput(mathfield) {
        document.getElementById('output').innerHTML = mathfield.$latex();

JSON keyboard layout

There is option to load keyboard from JSON file. Simple JSON structure is:

   "virtualKeyboardMode": "manual",
    "customVirtualKeyboardLayers": {
      "layer-name": {
        "styles": "",
        "rows": [
              "class": "keycap",
              "latex": "\\frac{x}{y}"
    "customVirtualKeyboards": {
      "keyboard-name": {
        "label": "Json",
        "tooltip": "Json keyboard",
        "layer": "layer-name"
    "virtualKeyboards": "keyboard-name"

Full button JSON example:

        "class": "",
        "insert": "",
        "key": "",
        "latex": "",
        "aside": "",
        "altKeys": "",
        "shifted": "",
        "shiftedCommand": "",
        "command": "",
        "label": ""

There are three modes of keyboard that can be set

"virtualKeyboardMode": "manual" will add button to hide/show keyboard "virtualKeyboardMode": "onfocus" will open keyboard when editor field is focused "virtualKeyboardMode": "off" will disable keyboard