pygfx · Vipitis · Sep 16, 2025 · Sep 16, 2025 · Sep 17, 2025 · Sep 17, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -164,13 +164,13 @@ jobs:
       - name: Install dev dependencies
         run: |
           python -m pip install --upgrade pip
-          pip install -U flit build twine
+          pip install -U flit twine
       - name: Create source distribution
         run: |
-          python -m build -n -s
+          python -m flit build --no-use-vcs --format sdist
       - name: Build wheel
         run: |
-          python -m build -n -w
+          python -m flit build --no-use-vcs --format wheel
       - name: Test sdist
         shell: bash
         run: |

diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 # Special for this repo
 nogit/
 docs/gallery/
+docs/static/*.whl
 docs/sg_execution_times.rst
 examples/screenshots/
 

diff --git a/docs/backends.rst b/docs/backends.rst
@@ -46,6 +46,12 @@ The table below gives an overview of the names in the different ``rendercanvas``
           | ``loop``
         - | Create a standalone canvas using wx, or
           | integrate a render canvas in a wx application.
+    *   - ``pyodide``
+        - | ``PyodideRenderCanvas`` (toplevel)
+          | ``RenderCanvas`` (alias)
+          | ``loop`` (an ``AsyncioLoop``)
+        - | Backend when Python is running in the browser,
+          | via Pyodide or PyScript.
 
 
 There are also three loop-backends. These are mainly intended for use with the glfw backend:
@@ -168,7 +174,7 @@ Alternatively, you can select the specific qt library to use, making it easy to
     loop.run()  # calls app.exec_()
 
 
-It is technically possible to e.g. use a ``glfw`` canvas with the Qt loop. However, this is not recommended because Qt gets confused in the precense of other windows and may hang or segfault.
+It is technically possible to e.g. use a ``glfw`` canvas with the Qt loop. However, this is not recommended because Qt gets confused in the presence of other windows and may hang or segfault.
 But the other way around, running a Qt canvas in e.g. the trio loop, works fine:
 
 .. code-block:: py
@@ -265,6 +271,78 @@ subclass implementing a remote frame-buffer. There are also some `wgpu examples
     canvas  # Use as cell output
 
 
+Support for Pyodide
+-------------------
+
+When Python is running in the browser using Pyodide, the auto backend selects
+the ``rendercanvas.pyodide.PyodideRenderCanvas`` class. This backend requires no
+additional dependencies. Currently only presenting a bitmap is supported, as
+shown in the examples :doc:`noise.py <gallery/noise>` and :doc:`snake.py<gallery/snake>`.
+Support for wgpu is underway.
+
+An HTMLCanvasElement to be assumed to be present in the
+DOM. By default it connects to the canvas with id "rendercanvas", but a
+different id or element can also be provided using ``RenderCanvas(canvas_element)``.
+
+An example using PyScript (which uses Pyodide):
+
+.. code-block:: html
+
+    <!doctype html>
+    <html>
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <script type="module" src="https://pyscript.net/releases/2025.10.3/core.js"></script>
+    </head>
+    <body>
+        <canvas id='rendercanvas' style="background:#aaa; width: 640px; height: 480px;"></canvas>
+        <br>
+        <script type="py" src="yourcode.py" config='{"packages": ["numpy", "sniffio", "rendercanvas"]}'>
+        </script>
+    </body>
+    </html>
+
+
+An example using Pyodide directly:
+
+.. code-block:: html
+
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script>
+    </head>
+    <body>
+        <canvas id="rendercanvas" width="640" height="480"></canvas>
+        <script type="text/javascript">
+            async function main(){
+                pythonCode = `
+                    # Use python script as normally
+                    import numpy as np
+                    from rendercanvas.auto import RenderCanvas, loop
+
+                    canvas = RenderCanvas()
+                    context = canvas.get_context("bitmap")
+                    data = np.random.uniform(127, 255, size=(24, 32, 4)).astype(np.uint8)
+
+                    @canvas.request_draw
+                    def animate():
+                        context.set_bitmap(data)
+                `
+            // load Pyodide and install Rendercanvas
+            let pyodide = await loadPyodide();
+            await pyodide.loadPackage("micropip");
+            const micropip = pyodide.pyimport("micropip");
+            await micropip.install("rendercanvas");
+            // have to call as runPythonAsync
+            pyodide.runPythonAsync(pythonCode);
+            }
+        main();
+        </script>
+    </body>
+    </html>
+
 
 .. _env_vars:
 

diff --git a/docs/conf.py b/docs/conf.py
@@ -12,18 +12,20 @@
 
 import os
 import sys
+import shutil
 
+import flit
 
 ROOT_DIR = os.path.abspath(os.path.join(__file__, "..", ".."))
 sys.path.insert(0, ROOT_DIR)
 
 os.environ["RENDERCANVAS_FORCE_OFFSCREEN"] = "true"
 
 
-# Load wglibu so autodoc can query docstrings
+# Load wgpu so autodoc can query docstrings
 import rendercanvas  # noqa: E402
-import rendercanvas.stub  # noqa: E402 - we use the stub backend to generate doccs
-import rendercanvas._context  # noqa: E402 - we use the ContexInterface to generate doccs
+import rendercanvas.stub  # noqa: E402 - we use the stub backend to generate docs
+import rendercanvas._context  # noqa: E402 - we use the ContextInterface to generate docs
 import rendercanvas.utils.bitmappresentadapter  # noqa: E402
 
 # -- Project information -----------------------------------------------------
@@ -40,10 +42,10 @@
 # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
 # ones.
 extensions = [
+    "sphinx_rtd_theme",
     "sphinx.ext.autodoc",
     "sphinx.ext.napoleon",
     "sphinx.ext.intersphinx",
-    "sphinx_rtd_theme",
     "sphinx_gallery.gen_gallery",
 ]
 
@@ -64,8 +66,88 @@
 master_doc = "index"
 
 
+# -- Build wheel so Pyodide examples can use exactly this version of rendercanvas -----------------------------------------------------
+
+short_version = ".".join(str(i) for i in rendercanvas.version_info[:3])
+wheel_name = f"rendercanvas-{short_version}-py3-none-any.whl"
+
+# Build the wheel
+toml_filename = os.path.join(ROOT_DIR, "pyproject.toml")
+flit.main(["-f", toml_filename, "build", "--no-use-vcs", "--format", "wheel"])
+wheel_filename = os.path.join(ROOT_DIR, "dist", wheel_name)
+assert os.path.isfile(wheel_filename), f"{wheel_name} does not exist"
+
+# Copy into static
+print("Copy wheel to static dir")
+shutil.copy(
+    wheel_filename,
+    os.path.join(ROOT_DIR, "docs", "static", wheel_name),
+)
+
+
 # -- Sphinx Gallery -----------------------------------------------------
 
+iframe_placeholde_rst = """
+.. only:: html
+
+    Interactive example
+    ===================
+
+    This uses Pyodide. If this does not work, your browser may not have sufficient support for wasm/pyodide/wgpu (check your browser dev console).
+
+    .. raw:: html
+
+        <iframe src="pyodide.html#example.py"></iframe>
+"""
+
+python_files = {}
+
+
+def add_pyodide_to_examples(app):
+    if app.builder.name != "html":
+        return
+
+    gallery_dir = os.path.join(ROOT_DIR, "docs", "gallery")
+
+    for fname in os.listdir(gallery_dir):
+        filename = os.path.join(gallery_dir, fname)
+        if not fname.endswith(".py"):
+            continue
+        with open(filename, "rb") as f:
+            py = f.read().decode()
+        if fname in ["drag.py", "noise.py", "snake.py"]:
+            # todo: later we detect by using a special comment in the py file
+            print("Adding Pyodide example to", fname)
+            fname_rst = fname.replace(".py", ".rst")
+            # Update rst file
+            rst = iframe_placeholde_rst.replace("example.py", fname)
+            with open(os.path.join(gallery_dir, fname_rst), "ab") as f:
+                f.write(rst.encode())
+            python_files[fname] = py
+
+
+def add_files_to_run_pyodide_examples(app, exception):
+    if app.builder.name != "html":
+        return
+
+    gallery_build_dir = os.path.join(app.outdir, "gallery")
+
+    # Write html file that can load pyodide examples
+    with open(
+        os.path.join(ROOT_DIR, "docs", "static", "_pyodide_iframe.html"), "rb"
+    ) as f:
+        html = f.read().decode()
+    html = html.replace('"rendercanvas"', f'"../_static/{wheel_name}"')
+    with open(os.path.join(gallery_build_dir, "pyodide.html"), "wb") as f:
+        f.write(html.encode())
+
+    # Write the python files
+    for fname, py in python_files.items():
+        print("Writing", fname)
+        with open(os.path.join(gallery_build_dir, fname), "wb") as f:
+            f.write(py.encode())
+
+
 # Suppress "cannot cache unpickable configuration value" for sphinx_gallery_conf
 # See https://github.com/sphinx-doc/sphinx/issues/12300
 suppress_warnings = ["config.cache"]
@@ -75,9 +157,10 @@
     "gallery_dirs": "gallery",
     "backreferences_dir": "gallery/backreferences",
     "doc_module": ("rendercanvas",),
-    # "image_scrapers": (),,
+    # "image_scrapers": (),
     "remove_config_comments": True,
     "examples_dirs": "../examples/",
+    "ignore_pattern": r"serve_browser_examples\.py",
 }
 
 # -- Options for HTML output -------------------------------------------------
@@ -92,3 +175,8 @@
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["static"]
 html_css_files = ["custom.css"]
+
+
+def setup(app):
+    app.connect("builder-inited", add_pyodide_to_examples)
+    app.connect("build-finished", add_files_to_run_pyodide_examples)
diff --git a/docs/contextapi.rst b/docs/contextapi.rst
@@ -24,7 +24,7 @@ then present the result to the screen. For this, the canvas provides one or more
                 └─────────┘               └────────┘
 
 This means that for the context to be able to present to any canvas, it must
-support *both* the 'image' and 'screen' present-methods. If the context prefers
+support *both* the 'bitmap' and 'screen' present-methods. If the context prefers
 presenting to the screen, and the canvas supports that, all is well. Similarly,
 if the context has a bitmap to present, and the canvas supports the
 bitmap-method, there's no problem.
@@ -44,7 +44,7 @@ on the CPU. All GPU API's have ways to do this.
                          download from gpu to cpu
 
 If the context has a bitmap to present, and the canvas only supports presenting
-to screen, you can usse a small utility: the ``BitmapPresentAdapter`` takes a
+to screen, you can use a small utility: the ``BitmapPresentAdapter`` takes a
 bitmap and presents it to the screen.
 
 .. code-block::
@@ -58,7 +58,7 @@ bitmap and presents it to the screen.
 
 This way, contexts can be made to work with all canvas backens.
 
-Canvases may also provide additionaly present-methods. If a context knows how to
+Canvases may also provide additionally present-methods. If a context knows how to
 use that present-method, it can make use of it. Examples could be presenting
 diff images or video streams.
 

diff --git a/docs/start.rst b/docs/start.rst
@@ -79,12 +79,12 @@ Async
 A render canvas can be used in a fully async setting using e.g. Asyncio or Trio, or in an event-drived framework like Qt.
 If you like callbacks, ``loop.call_later()`` always works. If you like async, use ``loop.add_task()``. Event handlers can always be async.
 
-If you make use of async functions (co-routines), and want to keep your code portable accross
+If you make use of async functions (co-routines), and want to keep your code portable across
 different canvas backends, restrict your use of async features to ``sleep``  and ``Event``;
-these are the only features currently implemened in our async adapter utility.
+these are the only features currently implemented in our async adapter utility.
 We recommend importing these from :doc:`rendercanvas.utils.asyncs <utils_asyncs>` or use ``sniffio`` to detect the library that they can be imported from.
 
-On the other hand, if you know your code always runs on the asyncio loop, you can fully make use of ``asyncio``. Dito for Trio.
+On the other hand, if you know your code always runs on the asyncio loop, you can fully make use of ``asyncio``. Ditto for Trio.
 
 If you use Qt and get nervous from async code, no worries, when running on Qt, ``asyncio`` is not even imported. You can regard most async functions
 as syntactic sugar for pieces of code chained with ``call_later``. That's more or less how our async adapter works :)

diff --git a/docs/static/_pyodide_iframe.html b/docs/static/_pyodide_iframe.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Rendercanvas example.py in Pyodide</title>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script>
+</head>
+
+<body>
+    <dialog id="loading" style='outline: none; border: none; background: transparent;'>
+        <h1>Loading...</h1>
+    </dialog>
+    <canvas id='rendercanvas' style='width:calc(100% - 20px); height: 450px; background-color: #ddd;'></canvas>
+    <script type="text/javascript">
+        async function main() {
+            let loading = document.getElementById('loading');
+            loading.showModal();
+            try {
+                let example_name = document.location.hash.slice(1);
+                pythonCode = await (await fetch(example_name)).text();
+                let pyodide = await loadPyodide();
+                await pyodide.loadPackage("micropip");
+                const micropip = pyodide.pyimport("micropip");
+                await micropip.install('sniffio');
+                await micropip.install('numpy');
+                // The below loads rendercanvas from pypi. But we will replace it with the name of the wheel,
+                // so that it's loaded from the docs (in _static).
+                await micropip.install("rendercanvas");
+                // Run the Python code async because some calls are async it seems.
+                pyodide.runPythonAsync(pythonCode);
+                loading.close();
+            } catch (err) {
+                loading.innerHTML = "Failed to load: " + err;
+            }
+        }
+        main();
+    </script>
+</body>
+
+</html>
diff --git a/docs/static/custom.css b/docs/static/custom.css
@@ -1,4 +1,10 @@
 div.sphx-glr-download,
 div.sphx-glr-download-link-note {
     display: none;
+}
+
+div.document iframe {
+    width: 100%;
+    height: 500px;
+    border: none;
 }
diff --git a/examples/drag.py b/examples/drag.py
@@ -70,6 +70,7 @@ def on_pointer_down(event):
             bx, by = block[:2]
             if bx - hs < x < bx + hs and by - hs < y < by + hs:
                 dragging = i, (bx, by), (x, y)
+                canvas.set_cursor("pointer")
                 break
 
 
@@ -107,6 +108,7 @@ def on_pointer_up(event):
     global dragging
     if event["button"] == 1:
         dragging = None
+        canvas.set_cursor("default")
 
 
 @canvas.add_event_handler("key_down")