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

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));
}

Or use a plain <script> tag — see the examples for more.

What You Can Build

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

import { ManimScene } from 'manim-web/react';

function App() {
  return <ManimScene construct={squareToCircle} width={800} height={450} />;
}

Vue

<script setup>
import { ManimScene } from 'manim-web/vue';
</script>

<template>
  <ManimScene :construct="squareToCircle" :width="800" :height="450" />
</template>

Python to TypeScript

Have existing Manim scripts? Convert them:

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

Contributing

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

License

MIT