A complete web equation editor – with first-class Arabic support.
Click or type a formula and export it as a crisp PNG image – ready for documents, slides and the web. Free to use online. Full English interface out of the box – and, as a feature of its own, right-to-left Arabic with the Arabic math letters.
60-second tour, no sound · watch it in full quality (MP4)
Features · Turn on Arabic · Arabic mathematics · Quick start · Use it on your site · Documentation
Try it online → mohammad-erhim.github.io/math-type-x · بالعربية
- It feels like a word processor for equations. A toolbar with 700 ready-made structures, a keyboard shortcut for everything, and a live preview – no code to learn.
- Complete in English, outstanding in Arabic. The full editor works in English; switch to Arabic and the whole interface, the typing rules, the layout and the exports work right to left, with Arabic mathematical letters built in.
- Your formulas are yours. Everything is stored as standard MathML, so it works in web pages, e-books and other editors, and exports to PNG images.
- Nothing to install for readers. It is a web page: it runs in any modern browser on a computer, a tablet or a phone.
Arabic is one switch away – pick the way that suits you:
1. Start in Arabic. Open the editor with ?lang=ar in the address (for example http://localhost:8080/?lang=ar), or pass
language: 'ar' when you embed it. The interface is translated and right-to-left editing is already on.
2. Already in English? Use the three numbered buttons of the General tab:
- Right to left editing – formulas grow from the right and structures are mirrored. Click again to go back to left to right.
- Arabic ligature – the Arabic letters you type join into one connected word. Leave it off to keep every letter separate, the way variables are written in a formula.
- Insert special characters – opens the character panel; choose Arabic math letters in the list to get the Arabic mathematical letters and the derivative marks.
For Arabic-Indic digits (٠١٢٣…) open the Greek, letters and numbers tab and use the numeral buttons.
|
Build formulas by clicking or typing Fractions, roots, powers, matrices, integrals, sums, limits, long division – pick them from the toolbar or type them. Undo and redo, copy and paste, bold and italic, colours and sizes all behave as you expect. |
|
|
Everything is one click away Nine tabs – general, symbols, arrows, Greek letters, matrices, scripts and layout, decorations, big operators and calculus – plus a contextual tab that offers exactly the controls that make sense for what is selected. |
|
Keyboard friendly Shortcuts for the common structures (Ctrl + / for a fraction, Ctrl + ↑ for a superscript), arrow-key navigation through every structure, and select, copy and paste like in a text editor. |
Copy, export, share Export the formula as a PNG image, with Arabic text shaped correctly. See the picture live in the output panel, then copy it or download it. |
On top of the full English editor, Arabic gets dedicated support: the interface, the typing, the layout, the symbols and the exports. See Turn on Arabic for how to switch.
- Right-to-left editing. Formulas grow from the right. Fractions, roots, powers, matrices and brackets are mirrored the way Arabic mathematics is printed, and the toolbar, pop-ups and output panel follow.
- Arabic interface. Every tab, tooltip, dialog and panel is translated.
- Arabic digits and letters. Type with your Arabic keyboard; digits default to Arabic-Indic (٠١٢٣…), and the numeral buttons of the toolbar also offer Western and Eastern Arabic-Indic digits.
- Arabic fonts. Choose Noto Naskh, Noto Sans Arabic, Noto Kufi Arabic or Tajawal for Arabic text. The same fonts are used in the editor and in every export, so what you see is what you get.
- Arabic function names and calculus. Controls that carry a differential use the Arabic letter, and common functions appear with their Arabic names.
A palette of Arabic mathematical letters – the shapes used in printed Arabic mathematics – is one click away (Insert special characters). They are drawn as vector shapes, so they look the same on every device and in every exported image, with no font to install.
They are aligned to sit on the same line as ordinary Arabic text. Here every ordinary letter is followed by its math letter:
The same palette has the 1, 2 and 3 derivative marks. Put them above a letter and they stand clear of it, never touching or crossing it; stack more marks as high as you need.
Printed mathematics sometimes needs a mark or a letter to sit a pixel or two away from where an automatic layout puts it. Select anything – a letter, a mark, a whole group – and open the contextual tab: four arrows move it pixel by pixel. The offset is saved inside the formula (as standard MathML), so it survives copy and paste and appears in every export.
Moving a mark three pixels right and three up – the offset is saved in the formula.
- Click the arrows in the contextual tab, or press Ctrl + Shift + an arrow key.
- Several selected elements move together.
- There is a separate control, Elements stacked, same size (Scripts and layout tab), for two items one above the other at full size – nest it for as many levels as you need.
On small screens the editor switches to a fluid layout: bigger touch targets, scrolling tab strip, an on-screen arrow pad (the soft keyboard has none), and the output as a slide-up bar.
You need Node.js 22 or newer.
npm install
npm run build
npm startOpen http://localhost:8080 – the editor and its output panel are ready. Add ?lang=ar for the Arabic interface.
| Useful keys | |
|---|---|
| Alt + 1 … 9, 0 | Switch toolbar tab (0 is the contextual tab) |
| Ctrl + / | Fraction |
| Ctrl + ↑ / ↓ | Superscript / subscript |
| Shift + arrows | Select |
| Ctrl + Shift + arrows | Move the selection by one pixel |
No server? npm run build:static produces plain files you can host anywhere (GitHub Pages, Netlify and others); the editor then
makes its images and conversions in the browser.
<div id="editorContainer"></div>
<script src="editor.js"></script>
<script>
const editor = MathTypeX.JsEditor.newInstance({ language: 'ar' }); // or 'en'
editor.insertInto(document.getElementById('editorContainer'));
editor.on('change', (e) => console.log(e.mathml)); // the formula as MathML
</script>Read the formula with editor.getMathML(), getLaTeX(), getSVG(), getPNG() or getAccessibleText(); set one with
setMathML(). The full API is in the technical reference.
| Technical reference | Build and deploy, source layout, embedding API, HTTP services, how it is tested, known differences |
| Architecture | How the editor, layout engine and services fit together |
| Services | The HTTP services behind images and conversions |
| Testing | Test suites and how to extend them |
| Changelog · Contributing | Release notes · how to help |
The Arabic math letters are shapes from the symbol tables of the Zulfi Math Arabic keyboard maps. Formulas are drawn with the bundled STIX Two Math, Liberation Sans and Noto Arabic faces.