Mathup: Easy MathML authoring tool with a quick to write syntax
20 comments
·March 21, 2025spankalee
I love that this publishes the <math-up> web component.
It's a great way to take content that's actually pretty humanly readable in the HTML, and translate it to an even better rendered format in the UI. It's good for progressive enhancement and framework support at the same time.
runarberg
Another nice thing about web components is that you can sniff the custom element registry (and even await a promised registration) for custom elements. I was writing a couple of markdown-it plugins yesterday[1][2] to render $dollar delimited math$ and simply places its content in either a <math-up> or a <la-tex>[3] element depending on what is already in the custom element registry. Meaning if you want to write LaTeX rather than AsciiMath all you have to do is import the webcomponent before you call the markdown-it render.
1: https://github.com/runarberg/markdown-it-mathblock
jpavel2
I absolutely love this project - for years I'd been using a homegrown s-exp to MathML translator, but your project is both more intuitive and capable.
mathup's tiny, clean API makes it easy to integrate the project in all sorts of processing workflows, both in-browser and scripting.
runarberg
Thank you. I’m glad you like it.
Garlef
Hmm... The mobile experience of that page is not very convincing on first contact
gnulinux
I don't see any issues in Android Firefox, works pretty much the same as my OSX Chrome or Firefox. What is the problem you're having I wonder?
runarberg
Author here. I will admit that the labeling of the playground is a bit sloppy. The input comes before the output on desktop (as it should) but is flipped in mobile (for ... reasons), but I never wrote an addEventListiner on the matchMedia to change the labels to reflect the swapped order. As a front end engineer for 10 years this is pretty embarrassing.
Another missing feature which quite alot mobile users expect is jump to top. I personally never use it, but many mobile users do.
Code blocks also have kind of excessive margins, and I should probably shrink the font-size so that more users could read the entire thing without horizontal scrolling, though I think this is fairly minor.
Finally, what I can think of, is the content it self. I made the choice when writing the docs, to teach the reader a little about MathML as I demonstrate the project. I think this was a solid choice but it puts the simplest most unimpressive expressions at the top. On desktop this is fine because you can see more impressive expressions further down, but on mobile these are hidden in a horizontal scroll, so the user might be left unimpressed.
BenFranklin100
I like this. It addresses a need for quickly writing math expressions with an intuitive syntax. I don’t have to write math expressions often enough to remember the more complex formatting from more powerful packages; and when I do use mathematical expressions, they are usually fairly simple. This will fill that niche.
runarberg
Thank you. That is exactly why I wrote this. I wanted users to be able to write math in a markdown document, but did not expect any of them to know LaTeX.
oofbey
Could pick a better homepage example. The demo code doesn't render very well in MathML. Kerning on the exponents is off. In "beta^alpha" the alpha character touches the beta. Looks better switching to MathJax.
runarberg
You are right. I hadn’t taken a close look at that expression in chromium (it looks fine on Firefox). I think this may be a Chrome rendering issue. I know Temml does a lot more than me to make sure the expressions look right (my primary concern is that the MathML markup is correct) and even Temml has the same problem[1].
Aside, I love this expression that you landed on. The Gamma distribution is one of the reason I started writing this library 10 years ago. The way the original AsciiMath can’t have arbitrary identifiers (only texts) was a deal breaker for me. The Gamma distribution is a very nice showcase for capabilities of an authoring tool like this because the name is usually written using latin letters `Gamma` while its density function also includes the gamma function which is usually written with a greek capital gamma (Γ). In the original AsciiMath writing Gamma just gives you the greek letter. The gamma distribution is also just a very cool distribution, or rather it contains some very cool distributions (in particular the Chi-squared distribution).
almostgotcaught
you know what we need even less than another json alternative? another math-language alternative. more so than any other formal(ish) language, a representation (for math) benefits from network effects (because math is both older and broader than any/every other such language).
runarberg
This is for authoring math expressions which compiles to MathML. MathML has the explicit design goal of being hard to write, and is much more meant to be a compiler target rather than for humans to write.
This space is pretty dominated by LaTeX whom almost all professionals use, but is pretty verbose and not exactly easy to use for beginners (or even non-frequent users). Other than LaTeX we have Office Math, which is a GUI, and AsciiMath. This tool is a dialect of AsciiMath[1] and builds on top of that. If you know AsciiMath, you know this. There is also UnicodeMathML[2], but that has another goal than this or AsciiMath, where the focus is on readability of authored expressions, rather than writability here.
zamadatix
Casual users probably just want the GUI options with less care of what syntax that may eventually involve on the backend. People deep enough to care about writing everything in raw syntax probably want to stick with LaTeX and can have a program transform that to MathML or SVG whatever else they need for display. The "here's a special syntax which is neither all of A or B" is just a hard sell.
On specific tools I've also liked https://www.imatheq.com/imatheq/com/imatheq/math-equation-ed... for quick casual use since it's just a webpage but still a decent GUI editor.
almostgotcaught
offline the best tool for this is LyX
Diti
> MathML has the explicit design goal of being hard to write
Wait, really? Do you have good primary sources to back up that claim?
runarberg
I worded this badly. I probably should have said that human authoring was not a concern while designing the language. MDN has a specific page for authoring MathML[1] where they suggest you probably don’t want to write them by hand and suggest you should use tools that generate MathML instead.
This is really no different from SVG. The design of the SVG markup language did not take considerations of people writing SVG images by hand, instead they designed the language to be a handy compiler target. Which it is, you can draw nice SVG images from a GUI like inkscape as well as nice graphs from a javascript library like d3.
1: https://developer.mozilla.org/en-US/docs/Web/MathML/Guides/A...
bschmidt251
[flagged]
bschmidt400
[flagged]
This is pretty much how I always wanted formulas in my notes to look like (but was too lazy to implement it myself, I guess). It's not even so much about fast input, it's about that it needs to be at least somewhat readable in plain text (not rendered), which LaTeX certainly isn't. Typing greek letters and stuff is not really a problem with XCompose, but TeX-based tools are too dumb to render "naïve" expressions pretty. I am not sure why: it seems not a huge computational task to figure out that ] is a `\right]`, and it's not like I often need to use `\left]` anyway. And while rendering `(a+b)/a` as a `\frac` is opinionated, honestly, the only reason why this occurs in my notes is when I was too lazy to type `\frac{}{}`.
I want this to be the default (or at least an option) in all markdown text editors (obsidian, github, etc.) I mean, as an intermediate: in the end MathJax rendering is much prettier than plain MathML.