Simplify MathML Authoring with Lightweight Syntax – Mathup

If you’ve ever wrestled with MathML, you know it can be… verbose. mathup is a JavaScript library that takes a more developer-friendly approach.

It lets you write math using a syntax similar to AsciiMath and outputs MathML.

This isn’t about replacing full-blown TeX rendering engines; it’s about making simple, everyday mathematical notation easier to manage in web projects.

For example: you write something like E[X] = int_(-oo)^oo x f(x) dx, and mathup transforms it into the corresponding MathML.

This solves the problem of hand-coding complex MathML tags, and it’s much lighter weight than including a full equation rendering library if all you need is the markup.

Key differentiators:

• Speed: mathup focuses solely on the translation, leaving rendering to the browser (or other MathML-compatible environments).
• Simplicity: The AsciiMath-inspired syntax is far easier to write and read than raw MathML.
• Flexibility: Use it on the server, in the browser, or even via the command line.
• Lightweight: Focused on parsing and translating expressions. Smaller and faster than larger alternatives.

Features:

• Fast conversion from a concise, AsciiMath-like syntax to MathML.
• Multiple installation options: npm, CDN, custom element.
• Customizable: Control decimal marks, separators, and display mode.
• Command-line interface for quick conversions.
• Browser-native MathML rendering (in most modern browsers).
• Custom Element.

Installation:

# NPM
$ npm install mathup

<!-- Browser -->
<script type="module" src="/dist/module/mathup.js"></script>
<link rel="stylesheet" href="/dist/mathup.css" />

<!-- Custom Element -->
<script type="module" src="/dist/module/math-up-element.js"></script>

How to use it:

1. Import mathup into your project.

import mathup from "mathup";

2. Create an expression and convert it to MathML:

// ES Module
const expression = "E=mc^2";
const mathml = mathup(expression);
// Output: <math><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow></math>
console.log(mathml.toString());
// Get a DOM node
const mathNode = mathml.toDOM();
// Add it to the page
document.body.appendChild(mathNode);

// Custom Element
<math-up>
E=mc^2
</math-up>

# CLI
mathup [options] -- <expression>

3. Available options.

• decimalMark (string, default: "."): The character used for the decimal point. If you set this to ,, the default colSep changes to ;.
• colSep (string, default: ","): The character used to separate columns in matrices. If you set this to ;, the default rowSep changes to ;;.
• rowSep (string, default: ";"): The character used to separate rows in matrices.
• display (string, default: "inline"): Can be "inline" or "block". Controls whether the generated MathML is displayed inline or as a block element.
• dir (string, default: "ltr"): Can be "ltr" (left-to-right) or "rtl" (right-to-left).
• bare (boolean, default: false): If true, omits the outer <math> tag. Useful for updating existing MathML nodes.

{  
  decimalMark: '.', 
  colSep: ',', 
  rowSep: ';', 
  display: 'inline', 
  dir: 'ltr',  
  bare: false
}

4. API methods.

• mathup(expression, options): The main function. Takes the expression string and an optional options object. Returns a MathUp object.
• MathUp.toString(): Returns the generated MathML as a string.
• MathUp.toDOM(): Returns a DOM MathMLElement.
• MathUp.updateDOM(mathNode): Updates an existing <math> node in place. Requires the bare option to be set to true.

Alternatives

• MathJax: MathJax is the industry standard for rendering TeX and MathML on the web. It’s powerful and feature-rich, but it’s also significantly larger than mathup. If you need full TeX support or advanced layout features, MathJax is the way to go. But if you’re just dealing with relatively simple expressions and prioritize performance, mathup is a better choice.
• KaTeX: KaTeX is another popular TeX rendering library, known for its speed. It’s faster than MathJax, but still more heavyweight than mathup. KaTeX is a good option if you need TeX support and want faster rendering than MathJax, but mathup wins if you can stick to its AsciiMath-like syntax.
• TeXZilla: Another great tool to consider, if your preferred notation is TeX.