MathLive

A Web Component for Math Input

[![Maintenance](https://img.shields.io/maintenance/yes/2022.svg)]() [![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/arnog/mathlive/master/LICENSE.txt) [![Build Status](https://travis-ci.org/arnog/mathlive.svg?branch=master)](https://travis-ci.org/arnog/mathlive) - [x] A **Web Component**, easy to integrate in your project, regardless of the framework you use, or even if you just use plain JavaScript - [x] Edit **math formulas** with an easy to use interface - [x] Beautiful, **TeX-quality** typesetting: over 800 LaTeX commands built-in - [x] Designed for **mobile devices** with an extensive set of **virtual keyboards** for math input - [x] Compatible with **screen readers**, and includes custom math-to-speech support for improved **accessibility** - [x] Output to **LaTeX**, **MathML** and **MathJSON** (Abstract Syntax Tree) formats - [x] And it is easy to **customize** to your needs! Reference documentation and guides at [cortexjs.io/mathlive](https://cortexjs.io/mathlive/). Try it at [cortexjs.io/mathlive/demo/](https://cortexjs.io/mathlive/demo/).

## Using MathLive To add a mathfield element to your page use a `` tag. It works just like a `

` or `<button>`. You can manipulate the
mathfield using methods of the element and listen for events to be notified when
its internal state changes.

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

## Documentation

<dl>
  <dt><a href="https://cortexjs.io/mathlive/guides/getting-started/">Quick Start</a></dt>
  <dd>Quick introduction to using MathLive in your project</dd>  
  <dt><a href="https://cortexjs.io/mathlive/guides/interacting">Interact with a mathfield</a></dt>
  <dd>Receive input and change the value of a mathfield</dd>
  <dt><a href="https://cortexjs.io/mathlive/guides/customizing">Customize a mathfield</a></dt>
  <dd>Adapt the behavior and appearance of a mathfield to your needs</dd>
  <dt><a href="https://cortexjs.io/mathlive/guides/commands">Execute commands</a></dt>
  <dd>Send editing commands to a mathfield</dd>
  <dt><a href="https://cortexjs.io/mathlive/guides/macros">Define custom LaTeX macros</a></dt>
  <dd>Extend the LaTeX commands supported</dd>
  <dt><a href="https://cortexjs.io/mathlive/guides/shortcuts">Manage inline and keyboard shortcuts</a></dt>
  <dd>Add or modify editing keyboard shortcuts</dd>
  <dt><a href="https://cortexjs.io/mathlive/guides/speech">Control speech output</a></dt>
  <dd>A mathfield can provide speech feedback to interact with it.</dd>
  <dt><a href="https://cortexjs.io/mathlive/guides/static">Display static math formulas</a></dt>
  <dd>Display non-editable math formulas in your page</dd>
  <dt><a href="https://cortexjs.io/mathlive/guides/virtual-keyboards">Define custom virtual keyboards</a></dt>
  <dd>Customize or create new virtual (on-screen) keyboards</dd>
  <hr>
  <dt><a href="https://cortexjs.io/mathlive/guides/integration/">Getting Started</a></dt>
  <dd>Everything you need to integrate the MathLive library to your project</dd>  
  <dt><a href="https://cortexjs.io/docs/mathlive">MathLive SDK</a></dt>
  <dd>Reference documentation of the MathLive API</dd>
</dl>

## Related Projects

<dl>
  <dt><a href="https://cortexjs.io/math-json">MathJSON</a> (on <a href="https://github.com/cortex-js/math-json">GitHub</a>)</dt>
  <dd>A lightweight data interchange format for mathematical notation.</dd>  
  <dt><a href="https://cortexjs.io/compute-engine">Compute Engine</a> (on <a href="https://github.com/cortex-js/math-json/tree/master/src/compute-engine">GitHub</a>)</dt>
  <dd>The CortexJS Compute Engine performs calculations on MathJSON expressions</dd>  
  <dt><a href="https://cortexjs.io/cortex">Cortex</a> (on <a href="https://github.com/cortex-js/math-json/tree/master/src/cortex">GitHub</a>)</dt>
  <dd>Cortex is a programming language for scientific computing</dd>  
</dl>

## Contact Us

- Join our [Gitter community](https://gitter.im/cortex-js/community)
- Drop a line to arno@arno.org

## License

This project is licensed under the [MIT License](LICENSE.txt).