60
Show HN: I ported Manim to TypeScript (run 3b1B math animations in the browser)
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!
Bug reports:
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.
Motion Canvas is a mature / popular solution in the "manim but typescript" space for those unfamiliar.
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
Please note that Motion Canvas is also abandoned, the main site is down, and the last commit was Dec 2024.
Afaik it's considered "stable".
There's 2800+ people in the discord.
And the community made a backup of the site https://archive.canvascommons.io/
Update: sounds like the author had some life changes and had to stop his YouTube channel which was the primary motivator for the library- but there are forks popping up (https://github.com/canvas-commons/canvas-commons).
---
This notion that an open source library is "dead" and shouldn't be used because it's not being actively updated is a bit odd. You can fork and fix issues you have. It's got years of many people's work put into it. It's a great library and widely used on YouTube and elsewhere.
How easy is it to replicate manim's style using motion canvas?
Someone wrote a blog about their journey https://slama.dev/motion-canvas/introduction/
But- probably reasonably simple, if you mean the "writing" style of manim. That's just animating an SVG stroke.
And then colors and typography
Thank you! I regularly use Reveal.js to create interactive slide decks for my classes, and your project will be a great tool to have!
Amazing!! This is a project I've wanted to tackle for years but never got the chance to properly do.
This is fantastic! Thank you for sharing.
thank you! this is awesome!!!
I'm far more into the web than python and have wanted something I could drop into a web page.
Now someone’s going to write a react-manim renderer I’m sure.
Congrats! This looks awesome!