KaTeX renderer comparison

Every expression rendered three ways, side by side: KaTeX JS (ground truth) · katex Dart → SVG · katex_flutter Math widget (Flutter web, one engine per row).

display display-mode expression approx known MVP approximation — expected JS/Dart difference, not a bug.

katex is a fresh Dart port of KaTeX. It parses LaTeX math into a backend-agnostic box tree, then renders that one tree two ways: to SVG with no Flutter dependency (CLI / server / web / SSR) and as a Flutter widget. This page renders every example three ways — original KaTeX (JS), our Dart → SVG, and the Flutter widget — side by side, so divergences are obvious at a glance.

How it differs from existing packages: tools like flutter_math_fork bolt rendering directly onto Flutter render objects and can't run outside Flutter. katex instead keeps a shared, backend-agnostic box tree as its core, so the exact same layout drives both the no-Flutter SVG output and the Flutter widget — and box dimensions are verified against original KaTeX.

★ View on GitHub

Live editor

Type a LaTeX expression — it renders live in all three renderers below.

⚠ report issue with this input
KaTeX JS
katex Dart SVG
katex_flutter
TeX source
KaTeX JS
katex Dart SVG
katex_flutter

Fractions

\frac{a}{b} display ⚠ report
\dfrac{a}{b} display ⚠ report
\tfrac{a}{b} display ⚠ report
\binom{n}{k} display ⚠ report
\cfrac{1}{1+\cfrac{1}{1+x}} display ⚠ report
\frac{1}{1+\frac{1}{x}} display ⚠ report

Scripts

x^2_i ⚠ report
{}^{n}C_k ⚠ report
x^{y^{z}} ⚠ report
f''(x) + f'(x) ⚠ report

Roots

\sqrt{x} ⚠ report
\sqrt[3]{x} ⚠ report
\sqrt{1+\sqrt{1+x}} display ⚠ report

Big operators

\sum_{i=0}^n i display ⚠ report
\sum_{i=0}^n i ⚠ report
\int_0^1 x^2 dx display ⚠ report
\prod_{i=1}^n i display ⚠ report
\oint_C \vec{F}\cdot d\vec{r} display ⚠ report
\bigcup_{i=1}^n A_i display ⚠ report

Delimiters

\left(\frac{a}{b}\right) display ⚠ report
\left[\frac{a}{b}\right] display ⚠ report
\left\{\frac{a}{b}\right\} display ⚠ report
\langle x, y \rangle ⚠ report
\lceil x \rceil + \lfloor y \rfloor ⚠ report
\bigl( \Bigl[ \biggl\{ \Biggl\langle x \Biggr\rangle \biggr\} \Bigr] \bigr) display ⚠ report

Accents

\hat{x} ⚠ report
\bar{x} ⚠ report
\vec{x} ⚠ report
\tilde{x} ⚠ report
\widehat{xyz} ⚠ report
\widetilde{xyz} ⚠ report
\overline{x+y} ⚠ report
\underline{x+y} ⚠ report
\overrightarrow{AB} ⚠ report

Fonts

\mathbf{Abc} ⚠ report
\mathrm{Abc} ⚠ report
\mathit{Abc} ⚠ report
\mathbb{RNZQC} ⚠ report
\mathcal{ABCL} ⚠ report
\mathfrak{ABCabc} ⚠ report
ABCabc
\mathsf{Abc} ⚠ report
Abc
\mathtt{Abc} ⚠ report
Abc
\boldsymbol{\alpha\beta\gamma} ⚠ report

Colors, sizing & styling

\color{red}{x} + \color{blue}{y} ⚠ report
\textcolor{green}{a+b} ⚠ report
\displaystyle\sum_{i=0}^n i ⚠ report
x + \scriptstyle y + z ⚠ report
\Large x \normalsize + \small y ⚠ report

Text & spacing

\text{if } x > 0 \text{ then } y ⚠ report
   
a\,b\;c\quad d\qquad e ⚠ report
\alpha + \beta + \gamma ⚠ report
a \cdot b \times c ⚠ report

Environments

\begin{matrix} a & b \\ c & d \end{matrix} display ⚠ report
\begin{pmatrix} a & b \\ c & d \end{pmatrix} display ⚠ report
\begin{bmatrix} a & b \\ c & d \end{bmatrix} display ⚠ report
\begin{Bmatrix} a & b \\ c & d \end{Bmatrix} display ⚠ report
\begin{vmatrix} a & b \\ c & d \end{vmatrix} display ⚠ report
\begin{aligned} a &= b + c \\ d &= e \end{aligned} display ⚠ report
f(x) = \begin{cases} 1 & x > 0 \\ 0 & x \le 0 \end{cases} display ⚠ report
\begin{array}{c|c} a & b \\ \hline c & d \end{array} display ⚠ report

Real-world formulas

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} display ⚠ report
e^{i\pi} + 1 = 0 display ⚠ report
\nabla \times \vec{B} = \mu_0 \vec{J} + \mu_0 \varepsilon_0 \frac{\partial \vec{E}}{\partial t} display ⚠ report
\Phi(x) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^x e^{-t^2/2}\,dt display ⚠ report
\sum_{k=0}^n \binom{n}{k} = 2^n display ⚠ report
\phi = 1 + \cfrac{1}{1 + \cfrac{1}{1 + \cfrac{1}{1 + \cdots}}} display ⚠ report