19

First of all, I'm sorry if this is not the appropriate page to ask, I will delete this thread if necessary.

I want to show a compiled version of some latex document (that should be able to be modified in real time) in my website. Looking at Overleaf and ShareLaTeX, they do this by using a HTML-canvas object. How do they do so? What I'm guessing is they compile is using a normal LaTeX compiler and then convert the PDF to SVG or something like that and upload it to the website. The other option is having a parser that converts .tex into canvas objects, though this is much harder. Can anyone confirm which of these is the approach they are using, or if it's another?

Improve this question
1
  • What is your end goal? If you're talking about the entire document being able to be modified, that will be quite difficult to implement. If you're talking about allowing a few fields to be modified, it would probably be better to go with html/css/js. There are also several tex -> html converters that could be useful, although you would still need to configure your server to use them appropriately.
    – Teepeemm
    Commented Dec 1, 2019 at 1:53

1 Answer 1

Reset to default
29

Overleaf uses a “normal latex compiler” (they recently upgraded to TeX Live 2018) on the backend. That is, converting your .tex file into PDF (using pdflatex or xelatex or whatever) happens on Overleaf's servers. After that, the system sends the resulting PDF to your browser, where their frontend code uses pdf.js to render the PDF in a HTML canvas. Some part of the Overleaf/ShareLaTeX source code is available on GitHub (the original 2014 blog post was at this link (now redirected)).

Apart from Overleaf, as far as “I want to show a compiled version of some latex document […] in my website” goes, another option is to produce DVI (instead of PDF) on the server, and then convert to SVG using dvisvgm.

The other possible approach is to run the compilation process in the user's browser instead. I know of two projects that aim to do this; so far both are experimental and rather slow:

  • There exists texlive.js (see demo) and xetex.js, which compile the TeX Live code to Javascript via Emscripten (could also compile to WebAssembly instead these days).

  • There's also Jim Fowler's recent work; see demo here and here, source code here/here/here, and TUGboat article in Vol 40 (2019) Issue 1. This compiles the WEB/Pascal code of TeX using a custom compiler into WebAssembly, then uses a custom DVI converter to render into HTML.

Improve this answer
3
  • 13
    Hello, this is Tom from Overleaf Support Team. Thanks for this answer! I can testify that this post describes our process precisely. I would just stress that the LaTeX compilation runs on our servers, and not in the browser.
    – yo'
    Commented Dec 1, 2019 at 7:43
  • 4
    @yo' Yes realized that "backend" may not make that clear enough; have edited to clarify.
    – ShreevatsaR
    Commented Dec 1, 2019 at 15:30
  • Thanks! :) ....
    – yo'
    Commented Dec 1, 2019 at 15:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .