manim-web 0.3.18 → 0.3.20

package/README.md

@@ -21,6 +21,32 @@ The power of [3Blue1Brown's Manim](https://github.com/3b1b/manim) — in the bro
 
 ## Quick Start
 
+### Browser
+
+```html
+<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
+
 ```bash
 npm install manim-web
 ```
@@ -38,46 +64,6 @@ async function squareToCircle(scene: Scene) {
 }
 ```
 
-### Browser Usage
-
-Use manim-web directly in the browser with a `<script>` tag -- no bundler needed:
-
-```html
-<canvas id="canvas" width="800" height="450"></canvas>
-<script type="module">
-  import { Scene, Circle, Create } from 'https://esm.sh/manim-web@0.3.17';
-
-  const scene = new Scene({ canvasId: 'canvas' });
-  const circle = new Circle({ radius: 1.5 });
-  await scene.play(new Create(circle));
-</script>
-```
-
-Alternatively, use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) for the self-hosted bundle:
-
-```html
-<script type="importmap">
-{
-  "imports": {
-    "three": "https://esm.sh/three@0.183.2"
-  }
-}
-</script>
-<script type="module">
-  import { Scene, Circle, Create } from './node_modules/manim-web/dist/index.js';
-  // ...
-</script>
-```
-
-Or use the self-contained browser bundle that includes Three.js (no import map needed):
-
-```html
-<script type="module">
-  import { Scene, Circle, Create } from './node_modules/manim-web/dist/manim-web.browser.js';
-  // ...
-</script>
-```
-
 See the [examples](https://maloyan.github.io/manim-web/) for more.
 
 ## What You Can Build