ManimWeb API#

Bases: AnyWidget

Run a manim-web <https://github.com/maloyan/manim-web>_ scene in a notebook.

manim-web is a TypeScript/WebGL reimplementation of Manim that renders animations entirely in the browser. This widget is a thin runner: it loads the manim-web engine from a CDN, then executes a blob of JavaScript you supply (the code traitlet). The animation plays inline; Python's only job is to hand over the source and the sizing.

Your JavaScript is run as the body of an async function with the manim-web module namespace (manim), the target DOM element (container), the width / height ints, and the widget model in scope. The recommended entry point is manim-web's own Player, which renders a full playback UI into container — play/pause, a scrub timeline with segment markers, speed control, fullscreen and export::

const player = new manim.Player(container, {
    width, height, autoPlay: true, backgroundColor: manim.WHITE,
});
player.sequence(async (scene) => {
    const circle = new manim.Circle({
        radius: 1.5, color: manim.BLUE, fillOpacity: 1,
    });
    await scene.play(new manim.Create(circle));
});

PlayerOptions extends SceneOptions, so width/height/ backgroundColor work alongside autoPlay and loop. Colours are plain hex strings (manim.BLUE, or "#e94560" directly); set fillOpacity: 1 for solid shapes on a light background.

The code is executed verbatim in the browser, so only pass JavaScript you trust (typically your own).

Examples:

import marimo as mo
from wigglystuff import ManimWeb

scene = '''
    const player = new manim.Player(container, {
        width, height, autoPlay: true, backgroundColor: manim.WHITE,
    });
    player.sequence(async (scene) => {
        const c = new manim.Circle({
            radius: 1.5, color: manim.BLUE, fillOpacity: 1,
        });
        await scene.play(new manim.Create(c));
    });
'''
mo.ui.anywidget(ManimWeb(code=scene, width=800, height=450))

Point at a local file or a URL instead of an inline string — the first argument accepts any of the three forms:

ManimWeb("scenes/intro.js")
ManimWeb("https://example.com/scene.js")

Create a ManimWeb widget.

The scene source is resolved in Python, so the browser always receives plain JavaScript. code (or src) may be any of:

• an inline JavaScript string,
• a path to a local .js file, or
• an http(s):// URL.

URLs and file paths are fetched/read here at construction time; the detection is by value, so ManimWeb("https://.../scene.js") and ManimWeb("const s = new manim.Scene(...)") both do the right thing.

Parameters:

Raises:

 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

def __init__(
    self,
    code: Optional[str] = None,
    *,
    src: Optional[str] = None,
    width: int = 500,
    height: int = 300,
    version: str = "0.3.24",
    **kwargs: Any,
) -> None:
    """Create a ManimWeb widget.

    The scene source is resolved in Python, so the browser always receives
    plain JavaScript. ``code`` (or ``src``) may be any of:

    * an inline JavaScript string,
    * a path to a local ``.js`` file, or
    * an ``http(s)://`` URL.

    URLs and file paths are fetched/read here at construction time; the
    detection is by value, so ``ManimWeb("https://.../scene.js")`` and
    ``ManimWeb("const s = new manim.Scene(...)")`` both do the right thing.

    Args:
        code: Inline JavaScript, a local file path, or an ``http(s)://``
            URL. Mutually exclusive with ``src``.
        src: An explicit alias for ``code`` (same accepted forms), handy
            when the intent is "load from here". Mutually exclusive with
            ``code``.
        width: Container width in pixels.
        height: Container height in pixels.
        version: The manim-web version to load from the CDN.
        **kwargs: Forwarded to ``anywidget.AnyWidget``.

    Raises:
        ValueError: If neither or both of ``code`` and ``src`` are given.
    """
    if (code is None) == (src is None):
        raise ValueError("Provide exactly one of `code` or `src`.")

    source = code if code is not None else src
    super().__init__(
        code=self._resolve_source(source),
        width=width,
        height=height,
        version=version,
        **kwargs,
    )