stefnotch / aftermath-editor

A WYSIWYG mathematics editor that understands your formulas!
https://stefnotch.github.io/aftermath-editor
MIT License
14 stars 0 forks source link
editor equation expression formula javascript math math-editor mathml typescript webcomponent

Aftermath Editor

A natural math editor that understands your formulas.

Why?

There are a lot of existing formula editors out there, but none of them solved my problems:

Thus, the goals are

  1. Nailing down the meaning of every equation. No more guessing how a computer or a fellow human might interpret it.
  2. Inputting and editing a formula should be as easy and fast as reasonably possible.
  3. Beautiful rendering, following the lead of industry standard LaTeX and MathML.

How do I use it?

Demo

How does it work?

The editor is built on top of MathML Core. MathML is a standard for rendering mathematical formulas on the web. It is a tree-structure that can be embedded in HTML, and then the browser will display it as a pretty formula.

This is an ideal choice for an editor, since MathML gives us a standardized representation, fast and browser-native rendering and importantly accessibility.

The editor web component has a few parts under the hood.

First, it uses a simple tree data structure for the user input. That input tree is somewhat similar to MathML, but is more suited for editing formulas. Keyboard and mouse input events are then used to modify the tree.

Then, that input tree is parsed into an concrete syntax tree, which has all the semantics. The concrete syntax tree can then optionally get transformed, which lets one implement difficult parsing rules.

Finally, the concrete syntax tree is used to render the formula as MathML.

More info can be found in CONTRIBUTING.md.

Features

Differences between this and ...?