LaTeX.wasm: Bringing LaTeX Engines to the Web Browser

SwiftLaTeX provides a WYSIWYG LaTeX editing experience directly in the browser. By leveraging LaTeX.wasm, the project implements full-scale LaTeX engines—specifically PdfTeX and XeTeX—written entirely in WebAssembly.

This technology allows for 100% browser-side execution, meaning the heavy lifting of typesetting happens on the client side rather than a remote server.

Core Capabilities

You no longer need a backend server to compile documents.

Available Demonstrations

You can test the engine's versatility through various demos. Note: Initial template downloads may take a few minutes; please be patient.

• PdfTeX Demos: IEEEConf, Beamer, UTF8, Tikz, and CV.
• XeTeX Demos: acmart, Chinese/Japanese, TrueType, Tikz, and Beamer.

Implementation Workflow

The following diagram illustrates the lifecycle of a document compilation using LaTeX.wasm:

Installation & Technical Guide

Follow these steps to integrate the engine into your project:

Step 1: Obtain the most recent release from the GitHub repository.

Step 2: Embed the engine script into your HTML:

<script src="PdfTeXEngine.js"></script>

Step 3: Initialize the engine instance.

const engine = new LaTeXEngine(); 
await engine.loadEngine();

Step 4: Upload your .tex files, images, or fonts to the virtual memory file system.

const engine = new LaTeXEngine(); 
engine.writeMemFSFile("main.tex", "\\documentclass{article}...");

Step 5: Define the entry point and execute the compilation.

engine.setEngineMainFile("main.tex"); 
let r = await engine.compileLaTeX(); 
// The variable 'r' now holds the PDF binary and the compilation log.

API Reference

The method for writing files is defined as: writeMemFSFile(filename: string, srccode: string | Uint8Array)

This allows you to render complex mathematical expressions like $a^2 + b^2 = c^2$ without leaving the browser environment.