Fork me on GitHub

LaTeX.wasm: LaTeX Engines in Browsers

100% Browser

PdfTeX and XeTeX written in 100% WebAssembly and run in browsers.

Compatibility

Produce exact same output you would get from TexLive or MikTeX.

Library Support

Simply include a script tag and use PdfTeX or XeTeX in your own webpage.

WYSIWYG

Support WYSIWYG editing on LaTeX documents using XeTeX engine.

Speed

Run merely 2X slower than native binaries.

Open Source

Completely Open Source. You can find the code on GitHub.
Select a demo:
It may take a few minutes to download template files for the first time. Please be patient
Installation
Step 1: Download latest release from Github. Extract the files and put them into your webpage directory.
Step 2: Include the src tag in your page. 
<script src="PdfTeXEngine.js"></script>
Step 3: Initial the engine. 
const engine = new LaTeXEngine();
await engine.loadEngine();
Step 4: Load the tex files/pictures/fonts to engines. 
const engine = new LaTeXEngine();
engine.writeMemFSFile("main.tex", "\documentclass{...");
Step 5: Set the main file and fire the compilation. 
engine.setEngineMainFile("main.tex");
let r = await engine.compileLaTeX(); // r contains PDF binray and compilation log.
APIs
  • async loadEngine(): Promise<void>.
      Load the webassembly engine.
  • isReady(): boolean.
      Check whether the engine is ready to compile documents.
  • writeMemFSFile(filename: string, srccode: string | Uint8Array).
      Upload source codes / assets to the engine.
  • makeMemFSFolder(folder: string).
      Create a directory.
  • setEngineMainFile(filename: string).
      Tell the engine which latex file is the entry file.
  • compileLaTeX():Promise<CompileResult>.
      Start compiling LaTeX documents and return CompileResult.
  • flushCache().
      Purge all the files uploaded.
  • closeWorker().
      Shutdown the engine.