Hi HN, I'm Narek. I built Manim-Web, a TypeScript/JavaScript port of 3Blue1Brown’s popular Manim math animation engine.
The Problem: Like many here, I love Manim's visual style. But setting it up locally is notoriously painful - it requires Python, FFmpeg, Cairo, and a full LaTeX distribution. It creates a massive barrier to entry, especially for students or people who just want to quickly visualize a concept.
The Solution: I wanted to make it zero-setup, so I ported the engine to TypeScript. Manim-Web runs entirely client-side in the browser. No Python, no servers, no install. It runs animations in real-time at 60fps.
How it works underneath:
- Rendering: Uses Canvas API / WebGL (via Three.js for 3D scenes).
- LaTeX: Rendered and animated via MathJax/KaTeX (no LaTeX install needed!).
- API: I kept the API almost identical to the Python version (e.g., scene.play(new Transform(square, circle))), meaning existing Manim knowledge transfers over directly.
- Reactivity: Updaters and ValueTrackers follow the exact same reactive pattern as the Python original.
Because it's web-native, the animations are now inherently interactive (objects can be draggable/clickable) and can be embedded directly into React/Vue apps, interactive textbooks, or blogs. I also included a py2ts converter to help migrate existing scripts.
Live Demo: https://maloyan.github.io/manim-web/examples
GitHub: https://github.com/maloyan/manim-web
It's open-source (MIT). I'm still actively building out feature parity with the Python version, but core animations, geometry, plotting, and 3D orbiting are working great. I would love to hear your feedback, and I'll be hanging around to answer any technical questions about rendering math in the browser!
(Being AI accelerated doesn't make this project low value. But it does mean _you_ didn't do the port so much as prompt it)
reply