Web component · Maths, chemistry, physics

Maths and chemistry, typed the way they are written.

MathInput is an input field for fractions, powers, roots, chemical equations and units. People type with a keypad or keyboard and see the result as it would look on paper. No LaTeX, no ^, no sqrt(). Your app gets a lossless tree plus LaTeX, text, spoken text and MathML.

Get started Open the demo View on GitHub

Try it

LaTeX
Text
Spoken

Built for the people typing, and for the apps that use the result

For anyone entering maths or science on a phone, tablet or laptop, in learning apps, calculators, scientific forms, notebooks or chat. And for developers who need the result in a form their software can use.

No input language

Tap a fraction and fill in the boxes. Type 3 then the fraction key and 3 becomes the numerator, like a calculator.

Keys show what they insert

Every template key is drawn with the same renderer as the answer, with the box the cursor lands in highlighted. An orange corner means "hold for more".

Chemistry and physics aware

Digits after an element become subscripts, charges and state symbols are one tap, and units stay upright with their own keypad.

Brackets one side at a time

Put brackets around something already written: type ( before it and ) after, just as on paper.

\frac{1}{2}

Every format you need

Each expression comes as a lossless JSON tree, LaTeX (with mhchem for chemistry), linear text, spoken English and MathML. Store it, render it, search it, read it aloud or pass it to other software.

Accessible

Full keyboard control, a spoken description for screen readers, 44 px touch targets, reduced-motion support and checked colour contrast.

Three lines to add it to any page

A standard custom element, so it works in plain HTML, React, Vue, Svelte or anything else. A React wrapper is included.

Install
npm install @mathinput/element
Import
Register the element and load the default styles.
Listen
Read latex, text or spoken from each input or submit event.

import "@mathinput/element/define";
import "@mathinput/element/mathinput.css";

<math-input subject="maths" label="Equation" submit-on-enter></math-input>

input.addEventListener("submit", (e) => {
  save(e.detail.doc);          // lossless tree
  preview(e.detail.latex);     // or text, spoken, mathml
});

Make it look like your app

Every colour, size, radius and font is a CSS custom property. These are all the same component with different tokens. Read the theming guide or try the skins in the demo.

About

MathInput started inside a study app for GCSE students in England. Students needed to write maths, chemistry and physics answers on their phones: fractions, powers, chemical equations, units. The editors available either expected them to learn an input language, were built around a desktop keyboard, or did not handle chemistry.

So the field was built keypad-first. Each key shows exactly what it inserts. Brackets can go round work already written. Chemistry and units behave the way they do on paper. And the result comes back as a structure software can use, not as markup to parse.

Nothing about that turned out to be specific to students or to one app. Anyone typing an equation into a web page has the same problem, so MathInput became a general-purpose component. It knows notation, not curricula. Its roots survive in two places: the GCSE and A-level notation it is tested against, and the optional @mathinput/presets-uk keypads.

MathInput is open source under the MIT licence. The code, spec and issue tracker are on GitHub.