Blog

Building a KaTeX math publishing demo live with Grok Build

After the xMoney hype tracker, we turned to something every technical writer needs: beautiful math on the web. In this session we built a full KaTeX publishing reference and folded it into airomatic.ai at /math/.

What we built

A complete math publishing section powered by KaTeX, remark-math, and rehype-katex — all rendered at build time with zero client-side JavaScript:

  • Overview — setup guide and reusable Astro components
  • Formula gallery — algebra, geometry, calculus, Euler’s identity, the Mandelbrot set, polar curves
  • Markdown comparison — LaTeX source next to rendered output
  • Math blog — sample article with inline and display equations

The same stack that powers this post: write $...$ for inline math and $$...$$ for display blocks in Markdown.

Why KaTeX?

Publishing equations on the web used to mean slow JavaScript renderers or ugly images. KaTeX compiles LaTeX to HTML at build time — fast, crisp, and accessible. Pair it with Astro’s static output and you get a site that loads instantly while still looking like a textbook.

A few formulas we featured in the demo:

Euler’s identity — often called the most beautiful equation in mathematics:

eiπ+1=0e^{i\pi} + 1 = 0

The quadratic formula — every algebra student knows it:

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

The golden ratio φ\varphi, which satisfies φ2=φ+1\varphi^2 = \varphi + 1:

φ=1+52≈1.618\varphi = \frac{1 + \sqrt{5}}{2} \approx 1.618

The Mandelbrot set — infinite complexity from a simple iteration zn+1=zn2+cz_{n+1} = z_n^2 + c:

M={c∈C:lim sup⁡n→∞∣zn∣≤2}M = \left\{ c \in \mathbb{C} : \limsup_{n\to\infty} |z_n| \le 2 \right\}

Browse the full formula gallery or read The Beauty of Mathematics for a longer tour with even more equations.

Watch the stream

The session recording is embedded above. Follow along as we scaffold the Astro project, wire up KaTeX, build the demo pages, integrate everything into airomatic-site, and push to GitHub.

Previous episode — xMoney hype tracker (YouTube).

Subscribe on YouTube for notifications when we go live. Questions or topic ideas? Send a message.