Download and Load

Download the latest release or build from source.

MathQuill depends on jQuery 1.5.2+, we recommend the Google CDN-hosted copy.

Load MathQuill with something like (order matters):

<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/mathquill.js"></script>
<script>
var MQ = MathQuill.getInterface(2);
</script>

Now you can call our API methods on MQ.

Basic Usage

MathQuill instances are created from HTML elements. For the full list of constructors and API methods, see API Methods.

Static Math Rendering

To statically render a formula, call MQ.StaticMath() on an HTML element:

<p>Solve <span id="problem">ax^2 + bx + c = 0</span>.</p>

<script>
  var problemSpan = document.getElementById('problem');
  MQ.StaticMath(problemSpan);
</script>

Editable Math Fields

To create an editable math field, call MQ.MathField() on an HTML element and, optionally, a config options object. The following example features a math field with a handler to check the answer every time an edit may have occurred:

<p><span id="answer">x=</span></p>

<script>
  var answerSpan = document.getElementById('answer');
  var answerMathField = MQ.MathField(answerSpan, {
    handlers: {
      edit: function() {
        var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
        checkAnswer(enteredMath);
      }
    }
  });
</script>

Get and Set Math

To get and set the contents of a math field, use mathField.latex().

Math fields are initialized with the text that was in the span, parsed as LaTeX. This can be updated by calling mathField.latex(latexString). To programmatically type text into a math field, use .typedText(string),

Join the Community

(Prefer IRC? We're #mathquill on Freenode.)