Mathfield Introduction

Let’s add an editable mathfield to a web page.

1. Add a <math-field>. The content of the this tag is the initial value of the mathfield, as a Latex expression.

2. Load the MathLive library with a <script> tag.

You can read more about options to integrate MathLive in your project in the Getting Started Guide.

The quadratic equation is now displayed as a math formula.

3. Edit the equation in the code playground below.

Note that you can modify the HTML or JavaScript code, then press the Run button to try your changes. Pressing the Reset button will bring back the playground to its original content.

4. Change line 3 of the HTML to another Latex expression, for example f(x) = \sin(x), then press the Run button

<script src="//unpkg.com/mathlive/dist/mathlive.min.js"></script> <math-field> x=\frac{-b\pm \sqrt{b^2-4ac}}{2a} </math-field>

Next

Interacting with a mathfield
How to read, write the content of a mathfield