MathInput

Web component · Maths, chemistry, physics

Maths answers, typed the way they are written.

MathInput lets learners enter fractions, powers, roots, chemical equations and units with a keypad or keyboard, and see them as they would on paper. No LaTeX, no ^, no sqrt(). Your app gets clean LaTeX, text and spoken output.

Get started Open the demo
Try it
LaTeX
Text
Spoken

Built for learners, and for the apps that mark their work

Designed for students answering questions on phones, tablets and laptops, and for developers who need the answer in a form a computer, or an LLM, can read.

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

Learners can put brackets around work they have already written: type ( before it and ) after, just as on paper.

Ready for LLMs

Every answer comes as LaTeX (with mhchem for chemistry), linear text, spoken English, MathML and a JSON tree. Empty boxes are marked, never lost.

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.

  1. Install

    npm install @mathinput/element

  2. Import

    Register the element and load the default styles.

  3. 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="Answer" submit-on-enter></math-input>

input.addEventListener("submit", (e) => {
  send(`Student answer: $${e.detail.latex}$`);
});

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.