Show HN: Latex.to – LaTeX to image converter running in the browser (opens in new tab)

(latex.to)

85 pointsWdorf1y ago38 comments

I've made a website to easily share a LaTeX math formula.

- The image is created in the browser (i.e. the LaTeX is not send to a server for rendering)

- Native share dialog (share via WhatsApp etc.)

- Extra keyboard buttons for symbols like "$" or "\" on mobile

- Share via png or unicode

Demo video: https://www.youtube.com/shorts/fGuTns5Nt9Q

Please let me know any feedback on how to improve the website.

38 comments

rfdonnelly1y ago

Kroki [1] supports TikZ and by extension: PGF [2] and LaTeX. It supports SVG, PDF, JPEG, and PNG outputs. Rendering is done on the server. URLs can be quite long since the source is embedded in the URL but you can use a URL shortener [3].

[1]: https://kroki.io/ [2]: https://tikz.dev/ [3]: https://tinyurl.com/kroki-svg-example

einpoklum1y ago

> Please let me know any feedback on how to improve the website.

1. You can give credit where it is due - on the website, to katex and the HTML-to-image renderer library/engine. 2. You could offer any of the three possible outputs: Raster image, HTML, MathML - for exporting/sharing/downloading.

WdorfOP1y ago

Thank you for your feedback.

I've just added the links to both projects in the info modal.

I will look into adding HTML and MathML exports in the next version.

mcraiha1y ago

1. Add tooltips to the top icons 2. Support SVG output

WdorfOP1y ago

Thank you, those are both very good suggestions I will look into!

Cieric1y ago

Shorts link didn't work for me, here is the normal player link

https://www.youtube.com/watch?v=fGuTns5Nt9Q

I'm not to familiar with LaTeX so I much prefer a WYSIWYG editor. I mainly use things like wolframalpha's editor to really get a good representation of what I need.

I know something like that might be out of scope for something like this, but you could potentially do preprogrammed buttons like having a sqrt button insert "\sqrt{}" to the cursor position.

WdorfOP1y ago

Thank you very much for your feedback, I will look into adding more keyboard buttons like "\sqrt{}"

kreyenborgi1y ago

For the other direction, there is https://detexify.kirelabs.org/classify.html :)

coffeeri1y ago

Even better is https://simpletex.cn/

Bimos1y ago

I'm a native Chinese speaker. I knew Detexify and used it a lot. This is the first time I see this software. I tried with hand written \succeq, and until its anti-crawler mechanism is triggered, it fails to give the answer. You can argue it is a software with a different purpose (e.g. to convert a piece of content rather than a single symbol), but to me it is not "even better" than detexify.

mindv0rtex1y ago

I was recently trying to solve a similar problem but on desktop platforms. I don't want to depend on LaTeX, but I'd like to be able to generate equation images inside a C++ desktop application. I tried to make MathJax run via QuickJS and extract the SVG for rasterization. But I couldn't make MathJax run with QuickJS.

sitkack1y ago

Have you tried embedding V8 to see how your idea works? Sounds good to me.

mgt199371y ago

Cool project! I like the idea of easily sharing LaTeX formulas. It's impressive how smooth it works right in the browser.

I've always thought compiling LaTeX in WebAssembly would be a tough nut to crack, so I was curious if that's what you'd done here. Turns out you're using KaTeX.

Have you considered any WebAssembly approaches?

WdorfOP1y ago

Thank you for your positive feedback.

KaTeX does not support all LaTeX features but initializes very quickly.

LaTeX via WebAssembly supports more features but might need longer to initialize.

There's an existing WebAssembly project: https://www.swiftlatex.com

red_trumpet1y ago

There is TikZJax[1], which apparently compiles TeX to WebAssembly, to run TikZ in the browser.

[1] https://tikzjax.com/

dunham1y ago

I played with web2js a couple of years ago. TeX ends up being a 500kb WASM file (88kb gzipped).

The LaTeX format file or the memory image after LaTeX is loaded are a bit bigger though (2.3 MB and 6.3MB gzipped, respectively).

jszymborski1y ago

Not OP, but do you mind me asking what advantages you hope to achieve by using WebAssembly rather than KaTeX?

trurl421y ago

Well, for one, KaTeX doesn't do "LaTeX" but a limited subset of the TeX equation syntax. As such, it can't handle more complicated macros or typesetting anything apart from equations.

ComputerGuru1y ago

I’d be very interested in the opposite! Lots of scanned or legacy images that would be nice to convert to LaTeX, or to create a robust PDF ingestion pipeline.

Vetch1y ago

In addition to the already mentioned https://huggingface.co/facebook/nougat-base, I also highly recommend https://huggingface.co/stepfun-ai/GOT-OCR2_0. It might even be better.

hextex1y ago

Facebook's Nougat [1] should work with this, but not sure how much preprocessing is needed to yield good results with scanned copies of physical documents. Note that it outputs .mmd files (MultiMarkDown), but the equations and tables should (iirc) output plain LaTeX.

1: https://github.com/facebookresearch/nougat

WdorfOP1y ago

This looks really interesting! I will definitely have a look.

sorenjan1y ago

Like Mathpix?

https://mathpix.com/

BeetleB1y ago

Mathpix is awesome. So far it has never gotten the output wrong. I even have it integrated into Emacs/org-mode.

WdorfOP1y ago

I could add a GPT based pdf to latex functionality in the future.

programjames1y ago

There's a similar feature on AoPS:

https://aops.com/texer

vzaliva1y ago

Have you considered translating formulae to MathML for rendering?

einpoklum1y ago

It looks like OP is already doing that. Or rather, OP calls katex (https://katex.org/) to get MathML and HTML; then renders the HTML to a raster image. But he's throwing the MathML away.

WdorfOP1y ago

KaTeX has a build in MathML feature, but I haven't yet looked into it for rendering.

The "Share text" functionality of the website uses KaTeX's MathML feature as an intermediate step.

KeplerBoy1y ago

How does it work? Are you shipping a wasm latex distribution?

WdorfOP1y ago

LaTeX: https://katex.org

Image generation: https://github.com/bubkoo/html-to-image

KeplerBoy1y ago

Okay, so it's not LaTeX, just math typesetting that looks like LaTeX and takes LaTeX input.

I'm more interested in solutions that work with the broader LaTeX ecosystem (like SiUnitX or amsmath).

abdullahkhalids1y ago

Mathjax does support a whole bunch of common latex math related packages [1]. SiUnitX is notably missing from the inbuilt extensions, but a port to version 2 is available [2]. Should be updated to version 3.

[1] https://docs.mathjax.org/en/latest/input/tex/extensions/inde...

[2] https://github.com/mathjax/MathJax-third-party-extensions

1 more reply

fweimer1y ago

Ahh. I was confused for a moment why \def wasn't working.

Ennea1y ago

It feels like I am seeing more and more websites lately that have a favicon that is deliberately broken, and I'm not sure why this appears to be a thing that is somehow gaining traction.

WdorfOP1y ago

I will design a proper favicon! I think I implemented the current placeholder according to https://stackoverflow.com/a/13416784

Ennea1y ago

The data URI you're using has no MIME type, and even then the data is still an invalid PNG image. Not sure why the Stack Overflow answer is suggesting that.

j / k navigate · click thread line to collapse

38 comments

rfdonnelly1y ago

[1]: https://kroki.io/ [2]: https://tikz.dev/ [3]: https://tinyurl.com/kroki-svg-example

einpoklum1y ago

> Please let me know any feedback on how to improve the website.

WdorfOP1y ago

Thank you for your feedback.

I've just added the links to both projects in the info modal.

I will look into adding HTML and MathML exports in the next version.

mcraiha1y ago

1. Add tooltips to the top icons 2. Support SVG output

WdorfOP1y ago

Thank you, those are both very good suggestions I will look into!

Cieric1y ago

Shorts link didn't work for me, here is the normal player link

https://www.youtube.com/watch?v=fGuTns5Nt9Q

I'm not to familiar with LaTeX so I much prefer a WYSIWYG editor. I mainly use things like wolframalpha's editor to really get a good representation of what I need.

I know something like that might be out of scope for something like this, but you could potentially do preprogrammed buttons like having a sqrt button insert "\sqrt{}" to the cursor position.

WdorfOP1y ago

Thank you very much for your feedback, I will look into adding more keyboard buttons like "\sqrt{}"

kreyenborgi1y ago

For the other direction, there is https://detexify.kirelabs.org/classify.html :)

coffeeri1y ago

Even better is https://simpletex.cn/

Bimos1y ago

mindv0rtex1y ago

sitkack1y ago

Have you tried embedding V8 to see how your idea works? Sounds good to me.

mgt199371y ago

Cool project! I like the idea of easily sharing LaTeX formulas. It's impressive how smooth it works right in the browser.

I've always thought compiling LaTeX in WebAssembly would be a tough nut to crack, so I was curious if that's what you'd done here. Turns out you're using KaTeX.

Have you considered any WebAssembly approaches?

WdorfOP1y ago

Thank you for your positive feedback.

KaTeX does not support all LaTeX features but initializes very quickly.

LaTeX via WebAssembly supports more features but might need longer to initialize.

There's an existing WebAssembly project: https://www.swiftlatex.com

red_trumpet1y ago

There is TikZJax[1], which apparently compiles TeX to WebAssembly, to run TikZ in the browser.

[1] https://tikzjax.com/

dunham1y ago

I played with web2js a couple of years ago. TeX ends up being a 500kb WASM file (88kb gzipped).

The LaTeX format file or the memory image after LaTeX is loaded are a bit bigger though (2.3 MB and 6.3MB gzipped, respectively).

jszymborski1y ago

Not OP, but do you mind me asking what advantages you hope to achieve by using WebAssembly rather than KaTeX?

trurl421y ago

Well, for one, KaTeX doesn't do "LaTeX" but a limited subset of the TeX equation syntax. As such, it can't handle more complicated macros or typesetting anything apart from equations.

ComputerGuru1y ago

I’d be very interested in the opposite! Lots of scanned or legacy images that would be nice to convert to LaTeX, or to create a robust PDF ingestion pipeline.

Vetch1y ago

In addition to the already mentioned https://huggingface.co/facebook/nougat-base, I also highly recommend https://huggingface.co/stepfun-ai/GOT-OCR2_0. It might even be better.

hextex1y ago

1: https://github.com/facebookresearch/nougat

WdorfOP1y ago

This looks really interesting! I will definitely have a look.

sorenjan1y ago

Like Mathpix?

https://mathpix.com/

BeetleB1y ago

Mathpix is awesome. So far it has never gotten the output wrong. I even have it integrated into Emacs/org-mode.

WdorfOP1y ago

I could add a GPT based pdf to latex functionality in the future.

programjames1y ago

There's a similar feature on AoPS:

https://aops.com/texer

vzaliva1y ago

Have you considered translating formulae to MathML for rendering?

einpoklum1y ago

It looks like OP is already doing that. Or rather, OP calls katex (https://katex.org/) to get MathML and HTML; then renders the HTML to a raster image. But he's throwing the MathML away.

WdorfOP1y ago

KaTeX has a build in MathML feature, but I haven't yet looked into it for rendering.

The "Share text" functionality of the website uses KaTeX's MathML feature as an intermediate step.

KeplerBoy1y ago

How does it work? Are you shipping a wasm latex distribution?

WdorfOP1y ago

LaTeX: https://katex.org

Image generation: https://github.com/bubkoo/html-to-image

KeplerBoy1y ago

Okay, so it's not LaTeX, just math typesetting that looks like LaTeX and takes LaTeX input.

I'm more interested in solutions that work with the broader LaTeX ecosystem (like SiUnitX or amsmath).

abdullahkhalids1y ago

[1] https://docs.mathjax.org/en/latest/input/tex/extensions/inde...

[2] https://github.com/mathjax/MathJax-third-party-extensions

1 more reply

fweimer1y ago

Ahh. I was confused for a moment why \def wasn't working.

Ennea1y ago

It feels like I am seeing more and more websites lately that have a favicon that is deliberately broken, and I'm not sure why this appears to be a thing that is somehow gaining traction.

WdorfOP1y ago

I will design a proper favicon! I think I implemented the current placeholder according to https://stackoverflow.com/a/13416784

Ennea1y ago

The data URI you're using has no MIME type, and even then the data is still an invalid PNG image. Not sure why the Stack Overflow answer is suggesting that.

j / k navigate · click thread line to collapse