HaTeX — LaTeX articles and slides, rendered in the browser

Research papers in LaTeX, read as web pages.

Made for computer science and AI papers, and the blogs that discuss them. Give HaTeX the LaTeX source of a NeurIPS, ICML, ICLR, CVPR, ACL or AAAI paper and it renders in the browser as the paper it is: title and authors, two columns where the template has them, numbered equations, tables and figures, TikZ, algorithms, natbib citations from your .bib, and the appendix. No TeX installation, no build step, no PDF viewer.

See the demos Try it Documentation hatex.js hatex.css GitHub

Version 1.11.2 · about 160 KB, no dependencies besides KaTeX · MIT License

What is HaTeX?

html + latex = hatex

HaTeX is a LaTeX renderer for research writing on the web, aimed at computer science and AI. Papers in these fields are written in a handful of conference templates, and HaTeX reads them as they are: the template's title block, its two columns, natbib citations, and the bibliography from your .bib or from the .bbl that comes with every arXiv source. A paper goes onto a blog or a project page straight from its source, without being rewritten for the web.

Readers get the paper, not a PDF: equations, figures, tables and theorems numbered as LaTeX numbers them, every reference and citation a link, text that can be searched and copied, and a layout that fits any screen, in two balanced columns when there is room and one on a phone. The same source keeps working for the rest of your writing: posts, notes and beamer slides.

The work happens in the reader's browser. HaTeX parses the .tex source into HTML, typesets the maths with KaTeX and compiles TikZ with real TeX running in WebAssembly, so there is nothing to install and nothing to build. If you'd rather ship plain HTML, the same parser runs in Node at build time.

It covers the LaTeX that papers use, and a command it doesn't know degrades to its text instead of breaking the page. Papers in the manual lists the templates and shows how to bring over an arXiv source.

Table 1: What each tool renders from a LaTeX source; ✓ marks a supported feature.

Method	Maths	StructureStruct.	2-column2-col.	TikZ	Beamer	In-browserBrowser
KaTeX	✓					✓
MathJax	✓					✓
LaTeX.js	✓	✓				✓
Pandoc	✓	✓
TeX4ht	✓	✓		✓
HaTeX (Ours)	✓	✓	✓	✓	✓	✓

Structure: sections, numbering, cross-references and citations. 2-column: a two-column paper stays in two balanced columns instead of being reflowed into one. Beamer: slide decks shown as slides. In-browser: the .tex source is rendered in the reader's browser, with no build step. HaTeX typesets its maths with KaTeX.

Try it

Edit the source on the left. The preview re-renders as you type, and the numbers in it are links. Pick an example to see two columns or a slide deck; preview only gives the preview the whole width.

Playground Example preview only Style

Quick start

Load KaTeX (for the maths) and HaTeX, then render a source into an element:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<link rel="stylesheet" href="https://mejistus.github.io/hatex/core/dist/hatex.css">
<script src="https://mejistus.github.io/hatex/core/dist/hatex.js"></script>

<article id="paper"></article>
<script>
  fetch('paper.tex')
    .then(r => r.text())
    .then(tex => HaTeX.render('#paper', tex));
</script>

The source can be a whole document (\documentclass … \begin{document}) or just its body. The preamble is read for \newcommand, \definecolor, \newtheorem and \usetikzlibrary. Serve the page over HTTP, not file://, so the .tex file and TikZ SVGs can be fetched. For highlighted code, add Prism and its language components; don't add a Prism theme.

What it renders

Area	Supported
Structure	`\section` … `\subsubsection` (numbered, `*` for unnumbered), `\paragraph`, `abstract`, nested `itemize` / `enumerate` / `description`, `quote`, `center`, `\footnote`
Maths (KaTeX)	$…$ , `$…$`, `\[…\]`; `equation`, `align`, `gather`, `multline`, … numbered per row, `\nonumber`, `\label` / `\eqref`; `\newcommand` and `\DeclareMathOperator`
Tables	`tabular` with `\toprule` / `\midrule` / `\bottomrule`, `\hline`, `\|`, `\multicolumn`, `\multirow`, `\cmidrule(lr)`, `\rowcolor` / `\cellcolor`; `\resizebox{\linewidth}{!}{…}` shrinks a wide table to fit
Figures	`\includegraphics[width=…\linewidth]`, `subfigure` (a), (b), side-by-side `minipage`, `\caption`; click an image to zoom
TikZ	`tikzpicture`, `tikzcd`, pgfplots `axis`; libraries detected from the code; `nn*` styles for network diagrams
Theorems	`theorem`, `lemma`, `proposition`, `definition`, … and `proof`; your own with `\newtheorem`
Algorithms	`algorithm` + `algorithmic`: `\State`, `\If`, `\For`, `\While`, `\Repeat`, `\Function`, `\Comment`, …
Code	`lstlisting`, `minted`, `verbatim`, `\verb`; highlighted when Prism is loaded
Papers	the title block of `\maketitle` and ICML's `\icmltitle` (authors, affiliations, `\thanks`); the conference templates' own commands skipped quietly; the bibliography from a `.bib` or an arXiv `.bbl`
References	`\ref`, `\eqref`, `\autoref`, `\cref`, `\cite{a,b}`, natbib's `\citep` / `\citet` as “(Vaswani et al., 2017)” / “Vaswani et al. (2017)”, `thebibliography`; each link scrolls to its target
Text	`\textbf`, `\emph`, `\texttt`, `\sout`, `\hl`, `\textcolor`, `\href`, `\url`, sizes, accents, dashes and quotes
Chinese	captions and names switch to 图 / 表 / 定理 / 证明 / 参考文献; no stray spaces at CJK line breaks; `\begin{guji}` sets vertical text on ruled landscape pages of 4:3 like an old book (right to left, 句讀 marks in place of punctuation, one page per printed sheet) and `\jiazhu{…}` adds two-line interlinear notes (夾注)
Layout	`\documentclass[twocolumn]`, the two-column conference styles (ICML, CVPR, ACL, AAAI, IJCAI, IEEE, ACM) and `multicols`: balanced columns on a wide screen, one column on a phone; headings, the abstract and `figure` / `table` span both columns, and equations too wide for a column are scaled to fit
Slides	`\documentclass{beamer}`: `frame`, `\titlepage`, `\tableofcontents`, `block` / `alertblock` / `exampleblock`, `columns`; any aspect ratio (16:9, 4:3, 1:1, …); a full-screen Present mode; overlays (`\pause`, `<2->`) show every step at once

Documentation

The HaTeX manual describes everything HaTeX does, chapter by chapter, and the syntax cheat sheet lists the supported LaTeX on one page.

Using HaTeX	Integrating HaTeX
Getting started How HaTeX reads a document Maths · Tables · Figures TikZ and the nn styles Theorems, proofs and algorithms · Code Cross-references, citations and footnotes Two columns · Slides · Vertical Chinese	JavaScript API: every function, option and event Theming: CSS variables, dark mode, fonts The HTML output Node, bundlers and static sites Checking sources Limitations and troubleshooting Developing HaTeX

License

HaTeX is released under the MIT License: use, copy, change and sell it for anything, as long as the copyright notice travels with it. It is original code, not a fork of another project. The libraries it loads from a CDN at runtime keep their own licenses (KaTeX and Prism are MIT, TikZJax is GPL-3.0-or-later), and none of them is bundled into hatex.js.

Nothing more is required. If HaTeX is useful to you, a star on GitHub is the nicest way to say thanks.