manim-web: Ditching Python Manim for Native Browser Rendering
manim-web transplants Manim's scene graph and animation system to JavaScript, targeting devs sick of spawning Python processes for web math visuals. It nukes the Python dependency that original Manim demands, letting you author declarative animations in TS that run at 60fps in any browser. Pain point crushed: no more headless rendering hacks or server-side compute for client-side explainers.
Under the Hood: Manim's Mobject-Scene-Renderer Pipeline
Core is a mobject hierarchy mirroring Manim's: primitives like Circle, Square, Arrow extend Mobject with strokeWidth, fillColor, and transformMatrix. Scene manages a renderer loop using CanvasRenderingContext2D for 2D and Three.js for 3D meshes (Sphere, Torus). LaTeX hits KaTeX for MathTex nodes, async-rendered via waitForRender() promises. Animations chain via async play() calls on Animation subclasses (Create, Transform, FadeOut), with LaggedStart and AnimationGroup for orchestration. Vite bundles at v5.x, Vitest tests DOM deps in happy-dom, TypeDoc generates API docs.
The Good & The Bad
Pros:
- Zero-runtime deps beyond npm; pure JS bundle under 1MB gzipped.
- Draggable, hoverable, clickable mobjects hook into browser events without frameworks.
- Full KaTeX pipeline renders complex LaTeX like
\int_{-\infty}^{\infty} e^{-x^2} dxin <100ms. - Three.js integration for Surface3D, orbit controls on NumberPlane3D.
- GIF/video export via Canvas capture, no FFmpeg.
- React/Vue hooks via
<ManimScene>wrapper.
Cons:
- 3D perf tanks on mobile without WebGL2; stick to 2D for broad reach.
- No VMobject curves or TipableVMobject Bézier fidelity yet; arrows distort on heavy transforms.
- Promise.all() races for multi-MathTexSVG can flake on slow CPUs.
- Docs lag code; hunt examples for VectorField quirks.
- No audio sync or Succession easing curves from core Manim.
Quickstart
npm install manim-web
Mount a Scene in your app, import mobjects/animations, chain scene.play() awaits. Above installs v0.3.4, exposes declarative API like new Circle({radius:1.5}). Run squareToCircle() renders a morphing square-to-circle with fadeout, expect 60fps replay on loop.
Who Should Use This (and Who Shouldn't)
Use it if: You're wiring interactive FunctionGraph demos for Khan Academy-style sites, need LaTeX transforms in React without iframes, or prototype BarChart anims for data viz prototypes. Skip it if: You demand production-grade VMobject paths for fractal renders (use Three.js raw), target non-WebGL browsers, or already sunk costs into server-side Manim pipelines.
Alternatives & When to Switch
Stick with original Manim (Python) if you need CLI batch-rendering videos with FFmpeg audio muxing. Grab D3.js for pure SVG data-driven transitions without 3D overhead. Pick GSAP if timeline precision trumps math primitives.
