manim-web

Mathematical animations for the web.

The power of 3Blue1Brown's Manim — in the browser, no Python required.

Quick Start · Examples · Docs · npm

Quick Start

Browser

<h1>Manim-web demo</h1>
<div id="container"></div>
<script type="module">
  import {
    Scene,
    Circle,
    Create,
  } from 'https://cdn.jsdelivr.net/npm/manim-web@latest/dist/manim-web.browser.js';
const options = { width: 500, height: 300 };
  const scene = new Scene(document.getElementById('container'), options);
  const circle = new Circle({ radius: 1.5 });
  await scene.play(new Create(circle));
</script>

Locally

npm install manim-web

import { Scene, Circle, Square, Create, Transform, FadeOut } from 'manim-web';
async function squareToCircle(scene: Scene) {
  const square = new Square({ sideLength: 3 });
  const circle = new Circle({ radius: 1.5 });
await scene.play(new Create(square));
  await scene.play(new Transform(square, circle));
  await scene.play(new FadeOut(square));
}

See the examples for more.

What You Can Build

Function Graphs	LaTeX Equations
Text Animations	Geometry Transforms

Features

• Geometry — Circle, Rectangle, Polygon, Arrow, Arc, Star, Brace, and more
• Text & LaTeX — Text, MathTex, Tex, Paragraph via KaTeX
• Graphing — Axes, NumberPlane, FunctionGraph, ParametricFunction, VectorField, BarChart
• 3D — Sphere, Cube, Cylinder, Torus, Surface3D, ThreeDAxes with orbit controls
• Animations — FadeIn/Out, Create, Transform, Write, GrowFromCenter, AnimationGroup, LaggedStart
• Interaction — Draggable, Hoverable, Clickable mobjects
• Export — GIF and video export
• Graphs & Tables — Network graphs, Matrix, Table

Framework Integrations

React

The ManimScene component builds the scene in the onSceneReady callback. It runs once, after the scene mounts.

import { ManimScene } from 'manim-web/react';
import { Circle, Create } from 'manim-web';
function App() {
  return (
    <ManimScene
      width={800}
      height={450}
      onSceneReady={async (scene) => {
        const circle = new Circle({ radius: 1.5 });
        await scene.play(new Create(circle));
      }}
    />
  );
}

Vue

The ManimScene component emits a ready event with the scene instance. Build the scene in the handler.

<script setup lang="ts">
import { ManimScene, Circle, Create, type Scene } from 'manim-web/vue';
const onReady = async (scene: Scene) => {
  const circle = new Circle({ radius: 1.5 });
  await scene.play(new Create(circle));
};
</script>
<template>
  <ManimScene :width="800" :height="450" @ready="onReady" />
</template>

Python to TypeScript

Have existing Manim scripts? Convert them:

node tools/py2ts.cjs input.py -o output.ts

Logging

manim-web logs through a small structured logger. Subscribe to log messages with onLog — useful for surfacing errors in your UI or forwarding them to a server (handy for AI agents that write and debug scenes):

import { onLog } from 'manim-web';
const unsubscribe = onLog((entry) => {
  // entry = { level, message, timestamp } — always JSON-serializable
  fetch('/__log', { method: 'POST', body: JSON.stringify(entry) });
});
unsubscribe(); // stop receiving log messages

Forwarded messages are sanitized (tokens, keys, and emails are redacted) and respect the LOG_LEVEL environment variable (debug | info | warn | error).

Contributing

git clone https://github.com/maloyan/manim-web.git
cd manim-web
npm install
npm run dev

How it was built

The port was written with coding agents. The story, with numbers from the git history: Porting Manim to TypeScript with Coding Agents.

License

MIT. Created by Narek Maloyan.