Beautiful, Powerful and Fun Document Tools (but requires a little extra work)
LaTeX with Javascript
LaTeX in a Web Browser
You might find this incredible, but you can actually compile LaTeX in your web browser. Yes! It's true! Your web browser (Chrome, Edge, Firefox, etc), you can do the work without an internet connection (your actual web page runs Javascript that compiles the '.tex' file and creates the '.pdf'. How cool is that?!
This is the full code here - you can download it and upload it to your server or run it on your local machine:
The webbased version (called texlive) is in fact a converted version of the pdflatex file. You also need to have access to the packages (texlive folder).
Based on the test code presented here - and the downloaded example above - you an try out the 'texlive latex lab' - taken the example and built it around a simple web-based editor:
The process for adding new packages to TexLive.js can seem a bit tedius - but once you've added a few packages it's straightforward.
1. Download the package you want from CTAN (e.g., textpos.sty)
2. Packages are in the texlive folder. Inside there, you'll navigate to 'texlive\texmf-dist\tex\latex' - you should see all the packages (each package is normally in a folder with the same name - but not always). You add your folder/sty files.
3. After this you'll need to update two files 'texlive.lst' in the root directory, and the 'ls-R' in the 'texlive\texmf-dist\'. These are just text files with a list of all the files (if the file isn't listed it can't be downloaded and you'll get an error).
You can update these files using a script called updatepackages.sh - basically recurses all the folders and saves the information to the files.
A real cause of pain and probably people have so many problems when they first try to add a new package - is the webbrowser cache. Reloading the webpage doesn't always force the browser to reload the new file from the server (it uses the cached version). Either clear the cache or rerun the webbrowser in a private/ingonito window (so it doesn't store/cache data).
The default example code includes some basic packages - but you'll probably want to add lots and lots more (there are thousands of packages which are constantly updated on CTAN).
You can download the complete CTAN database free online. Be warned though, it can take a long time to download. Once you've got it downloaded - you can copy across any packages you need to your textlive.js.
These are the steps I went through to add 'xcolor' to the list of available packages.
First, you should have the 'CTAN' packages - you can download them (link is above) - warning, it's a big download (lots and lots of packages).
You should have something like this, which you unzip:
go to folder: texmf-dist\tex\latex
Usually each folder is the name of a package, for example: xcolor
Inside there is the files:
Copy these to your texlive folder:
texlive\texlive\texmf-dist\tex\latex
You have the package in your texlive folder (i.e., xcolor with all the files).
You can't, however, use it yet! As this is Javascript so you've got to link it to the list of available files.
Need to update 2 files:
To make your life easier, there is a script called 'updatepackages.sh' in the base folder - you can call this and it does this automatically (it essentially loops over all the files and adds them to the list).
texlive.lst and ls-R are just txt files listing all the files.
For example, the texlive.lst, will have these extra lines:
Same as ls-R will now have these extra lines:
If all went well, your texlive build show now support the new added xcolor package, test it like this:
As an example, a sub-website was built with lots of examples based on the minimal working code below. The texlive.xbdev.net is a web-based resource that lets you build/test simple LaTeX Projects (don't need a server to compile the pdf) - all done locally.
• Runs locally in the server (privacy so you don't need to send your data/files - stay local on your machine)
• Self contained (Javascript)
• Free and open-source
• Lots of examples and resources
Try Example Here - LaTeX with Javascript (Give it a Try)
Live Example - Compile LaTeX to PDF (A LaTeX Compiler for Javascript (Compile LaTeX in Browser)
The following provides the actual working code (you can download it from above). The test version uses the packages for texlive build. Packages are constantly getting updated, so you can update this if needed (texlive folder).
The `latex` is shown in the editable textarea below - whichyou can edit if you want. You then select the compile button and it will start building the pdf. The compiler will download the necessary packages from the 'texlive' folder.
LaTeX Input
Console Output
Click "Compile this LaTeX code to PDF" at the top of this page and watch the console output here.
