JSPM

  • Created
  • Published
  • Downloads 49134
  • Score
    100M100P100Q146710F
  • License MIT

Render and edit beautifully typeset math

Package Exports

  • mathlive
  • mathlive/dist/mathlive-fonts.css
  • mathlive/dist/mathlive.js
  • mathlive/dist/mathlive.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mathlive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

math live

Screenshot

MathLive: A Web Component for Math Input

  • A Web Component easy to integrate in your project, regardless of the framework you use (or even if you use no framework)
  • Beautiful, TeX-quality typesetting
  • Easy to use interface for formula editing
  • Designed for mobile devices with an extensive set of virtual keyboards
  • Accessility support: screen reader compatible, and includes custom math-to-speech support
  • Outputs LaTeX, MathML and MathJSON (Abstract Syntax Tree)
  • And it is easy to customize to your needs!

Maintenance GitHub license Build Status David

See cortexjs.io for more info or try it at mathlive.io

The popover panel A Virtual Keyboard
The Loop Equation

Using MathLive

Editing Math

To add a mathfield element in your page use a <math-field> tag. It works just like a <textarea> or <button>. You can manipulate the mathfield using methods of the element and listen for events to be notified when its internal state changes.

<!DOCTYPE html>
<html lang="en-US">
    <body>
        <math-field>f(x)=</math-field>
        <script src="https://unpkg.com/mathlive/dist/mathlive.min.js"></script>
    </body>
</html>

Displaying Static Math

Render static math equations by adding two lines to your web page.

<!DOCTYPE html>
<html lang="en-US">
    <body>
        <h1>Euler's Identity</h1>
        <p>$$e^{i\pi} + 1 = 0$$</p>

        <script type="module">
            import { renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.min.mjs';
            renderMathInDocument();
        </script>
    </body>
</html>

Want to Help?

  • Using MathLive in your project? Want to support the project ongoing maintenance? Consider making a donation with PayPal
  • Something wrong? Got ideas for new features? Write up an issue. Read about Contributing and follow our Code of Conduct
  • Want to contribute some code for an issue or a feature? Read the Contributor Guide and the docs. Looking for inspiration? Pick one of the good first issues

More Questions?

License

This project is licensed under the MIT License.