Mathfield Introduction

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

1. Load the MathLive library from a CDN with a <script> tag.

Read about other options to integrate MathLive in your project in the Getting Started Guide.

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

3. Edit the equation in the code playground below.

The code playground below and in the rest of the documentation are live: when you modify the HTML or JavaScript code the output will update to reflect your changes. Press Reset to bring back the playground to its original state.

4. Change line 3 of the HTML to another Latex expression. For example f(x) = \sin(x),

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