Show HN: I ported Manim to TypeScript (run 3b1B math animations in the browser) (github.com)
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!
14 comments
[ 3.1 ms ] story [ 37.1 ms ] threadI'm far more into the web than python and have wanted something I could drop into a web page.
It can be used for interactive blog posts and embedded animations etc as well.
It also has a built in animation editor / timeline.
https://github.com/motion-canvas/motion-canvas
The entire Manim CE Logo example, the `x - x_1` text from the Brace Annotation example, all text from the Sin Cos Plot example, and the entire Heat Diagram example all flicker roughly once per second.
The text looks rather fuzzy, especially the large M from the Manim CE Logo example.
The Three D Light Source example also doesn't appear to have any functioning directional lighting.
However, I use Manim for maths, for me having computational libraries (python) is a requirement. Most of the transformations that I do are found by using linear algebra, calculus and sometimes full neural networks. All my geometry is computed, not placed by hand.
I'm wondering if it would not be possible to have a 'canvas' backend for the web in the python version instead.
Btw, Manim is kind of easy to install in its own docker ;)
Tried the live demo and the 3D orbit scene is surprisingly smooth. Curious about a couple things:
- How are you handling the animation interpolation? Manim's rate functions (smooth, there_and_back, etc.) have some quirks that are easy to get subtly wrong. Did you reimplement those from scratch or find a way to match the Python easing curves exactly? - For the py2ts converter — how far does it get on real-world scripts? I have a few older Manim CE scripts with custom VMobjects and I'm wondering if it handles subclassing or if it's more of a "simple scenes only" thing.
One suggestion: it'd be really useful to have an export-to-GIF or export-to-MP4 option directly in the browser (maybe via MediaRecorder API). A lot of the Manim use case is generating assets for slides/posts, not just live playback.
(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)