alt.hn

4/20/2025 at 10:04:22 PM

TikZJax: Embedding LaTeX Drawings in HTML

 https://tikzjax.com/

by steventhedev

4/21/2025 at 12:10:36 AM

Jim Fowler seemed like Calculus' biggest hype man when the MOOC ball was just starting to roll. If you're looking to brush up and like the more energetic/engaging style I'd recommend checking out his videos on YouTube or elsewhere.

> Using web2js, the Pascal source of tex is compiled to WebAssembly; the latex format is loaded (without all the hyphenation data), and [...] is executed. Then core is dumped; the resulting core is compressed, and by reloading the dumped core in the browser, it is possible to very quickly get to a point where TikZ can be executed. By using an SVG driver for PGF along with dvi2html, the DVI output is converted to an SVG.

This is the kind of hack I'm here for.

by ics

4/21/2025 at 7:43:22 AM

Thanks for the recommendation, this is really cool!

by 3abiton

4/21/2025 at 2:10:46 AM

Funny seeing this on the front page – I'm coding a project as I'm browsing this that makes heavy use of TikZJax.

Overall, I'm impressed by how seamlessly it works when it does work. But it's not perfect:

- Some core library functions (for example, most types of fill patterns) simply don't work or aren't implemented for some reason.

- There are a few long-standing bugs. For instance, if using the intersections library to compute the intersection of a line and a circle, it straight-up crashes the entire TikZJax process. Intersections of two lines or two circles are fine, but circle+line fails. My attempts at diagnosing this seem to indicate that it's running out of stack space, so maybe the original TikZ code uses some inefficient recursive algorithm to compute this intersection, and this exceeds some stack size limit that the WebAssembly version introduces. I'm not sure and I haven't been able to get much traction.

- The project doesn't seem to get any love from the original developers anymore. I've filed multiple bugs for months now that never get any form of acknowledgement.

- The build process is pretty convoluted and difficult to reproduce (to try to fix those aforementioned bugs myself), which I guess is what you'd expect from a project that attempts to cross-compile a 20-year-old macro package for a 50-year-old Pascal codebase for rendering in the browser.

Overall I'm very glad TikZJax exists and there's still no better-looking and convenient-to-author diagramming language than TikZ itself. But there's definitely rough edges.

by apetresc

4/21/2025 at 11:44:04 AM

As the author of TikZJax, I can certainly apologize for not making more progress on this.

I need to get back to this project! I'd very much like to clean up the build process.

by kisonecat

4/21/2025 at 4:07:27 AM

Apparently there are some forks that offer more features and fix some of those bugs. Maybe one of those can help you?

This is the one that was shared on lobsters, but there are likely more: https://bill-ion.github.io/tikzjax-live/

by steventhedev

4/21/2025 at 12:22:40 AM

Using a “core dump” (dumping the webassembly heap) is an interesting optimization approach with historical precedent both in TeX itself and projects like Emacs (dump/unexec) — https://www.gnu.org/software/emacs/manual/html_node/elisp/Bu...

It’s also notoriously fragile and non-portable on native targets; I’m curious how one implements it under webassembly, and how it compares.

by frumplestlatz

4/21/2025 at 2:08:26 AM

Being able to start a process, have it run for a bit to, say, read in initialization data, populating dynamic data structures along the way, and then interrupt the process and save the whole state as a new executable, was a feature built into DEC’s Tops10 and Tops20 operating systems / standard runtimes, along with related custom systems like Waits, under which TeX was developed. It took just two lines of code for TeX to implement its side of this feature on those first platforms.

It came as a bit of a shock at the time that all the Unix-y systems had no such native concept, and that fragile, non-portable user-space schemes were required to mimic this functionality.

by drfuchs

4/21/2025 at 11:36:19 AM

Resurrecting this workflow was one of the funniest things in implementing TikZJax.

by kisonecat

4/21/2025 at 11:40:44 AM

Author of TikZJax here...

I'm endlessly distracted by other things at work, but I believe this same idea could also be used to provide real-time compilation of TeX'd documents as they're typed. Simon Rubinstein-Salzedo had suggested wanting something like a real-time Overleaf to teach his classes at https://eulercircle.com/ Interrupting and resurrecting the TeX-in-the-browser would let you render a document as it is typed.

by kisonecat

4/21/2025 at 5:36:24 AM

While live rendering is nice, I suppose that generating static SVGs that are embedded in a static webpage generator are more fruitful for the typical case. A quick search yielded this: https://polbarrachina.com/2022/05/23/latex-and-tikz-in-jekyl...

by xenonite

4/21/2025 at 6:25:10 AM

In a wiki setting for example, it might be nice as it makes the direct human edition more accessible. Not as accessible as an embedded SVG editor of course. But still, compare how latex formula are used in Wikipedia, compared to mathml, or SVG.

by psychoslave

4/21/2025 at 11:38:37 AM

I'm fond of using KaTeX for my personal blog posts. There is support for server side rendering for KaTeX (but not on GitHub pages because it necessarily opens it to arbitrary code execution - I asked).

But it notably lacks tikz support and if it can emit SVGs I'm beginning to wonder why I even use KaTeX and not something like this (beyond my personal anti-JS sentiment)

by steventhedev

4/20/2025 at 11:52:36 PM

Hm. Either that page or the tech itself is not great on mobile.

by Garlef

4/21/2025 at 12:08:08 AM

Takes a second or so to load on mine (iOS Safari). But then it shows correctly, even if the second diagram is a bit small (it fits in a quarter of the 1in circle).

by ano-ther

4/21/2025 at 12:11:04 AM

It crashes (“a problem repeatedly occurred”) a few seconds after loading everything on my device (also iOS Safari).

I love tikz, but lightweight it is not; it’s not a huge surprise it takes a few seconds to render.

No idea what’s causing the crash, though.

by frumplestlatz

4/21/2025 at 1:06:37 AM

Well iOS Safari is in general buggy and tends to display the "a problem repeatedly occurred" message on many other slightly heavy web pages. This web page shouldn't be blamed for causing Safari to crash.

by kccqzy

4/21/2025 at 1:32:24 AM

Nobody is assigning blame, we don’t know the root cause.

I could just as easily say that Safari shouldn’t be blamed for a buggy website, but I’d be overreaching just as much as you just did.

by frumplestlatz

4/21/2025 at 1:43:42 AM

By definition buggy websites that crash the browser are bugs in the browser.

It may have security implications, or it may not. It might just be an innocent case of someone using assertions instead of proper error reporting. Nevertheless it's a bug in the browser.

by kccqzy

4/21/2025 at 6:58:18 AM

It doesn’t crash, but tells me there is a problem. To me,this seems like a safe way to deal with buggy websites.

by Jaxan

4/21/2025 at 1:54:10 AM

Safari will terminate a page for using excess resources with the same message.

by frumplestlatz

4/21/2025 at 2:37:37 AM

So? Still Safari's problem for not displaying a proper error message.

by kccqzy

4/21/2025 at 4:11:17 AM

Sounds like you just dislike Safari. Doesn’t seem to be much help here.

by frumplestlatz

4/21/2025 at 2:05:36 PM

No. Safari chose the exact wrong way to handle this case. Let's suppose some webpage is in fact allocating too much memory. It is the user agent's job to inform the user of this fact. What does Safari do? It silently crashes. It's not even about displaying the wrong error message here: the handler for the crash is to simply refresh the page and render it again. But this is exactly the wrong way to handle out-of-memory errors: chances are the web page will again allocate too much memory and crash yet again. In the end the final displayed error message is "a problem repeatedly occurred" with no reference to the nature of the problem.

I hate this trend of hiding error messages from the user. Apple as a company known for its attention to detail in UI, should have been the one company especially dedicated to presenting a good error message without overwhelming the user with technical details—it is supposed to be the master in user communication. And it is not. Hence my disappointment.

by kccqzy

4/21/2025 at 2:07:55 AM

The author does not have an iphone to test.

by revskill

4/21/2025 at 8:19:15 AM

Holy smokes. That’s a name I haven’t heard in a while. I submitted many calculus homework assignments in LaTeX because Jim introduced it to me back at our high school. (Go Mankato West Scarlets!)

by klabetron

4/21/2025 at 11:35:12 AM

Matt Klaber?! If so, great to run into you!

I mean, I'm guessing from "klabetron"... Unfortunately I don't think my "kisonecat" gives much clue to "Fowler".

by kisonecat

4/23/2025 at 7:55:50 AM

lol yep

by klabetron

4/22/2025 at 12:11:45 AM

this looks cool. i guess i would generally prefer to do the SVG rendering on the server rather than on the client.

by ycombinatrix

4/21/2025 at 3:29:59 AM

[dead]

by unit149