manzt/anywidget: jupyter widgets made easy

trafficstars

anywidget

custom jupyter widgets made easy

installation . docs . discord . learn

About

anywidget uses modern web standards to simplify authoring and distributing custom Jupyter Widgets.

🛠️ create widgets without complicated cookiecutter templates
📚 publish to PyPI like any other Python package
🤖 prototype within .ipynb or .py files
🚀 run in Jupyter, JupyterLab, Google Colab, VSCode, marimo and more
⚡ develop with instant HMR, like modern web frameworks

Learn more in the Jupyter blog.

Installation

anywidget is available on PyPI:

pip install "anywidget[dev]"

and also on conda-forge:

conda install -c conda-forge anywidget

Usage

import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
    # Widget front-end JavaScript code
    _esm = """
    function render({ model, el }) {
      let button = document.createElement("button");
      button.innerHTML = `count is ${model.get("value")}`;
      button.addEventListener("click", () => {
        model.set("value", model.get("value") + 1);
        model.save_changes();
      });
      model.on("change:value", () => {
        button.innerHTML = `count is ${model.get("value")}`;
      });
      el.appendChild(button);
    }
    export default { render };
    """
    # Stateful property that can be accessed by JavaScript & Python
    value = traitlets.Int(0).tag(sync=True)

Front-end code can also live in separate files (recommend):

import pathlib
import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
    _esm = pathlib.Path("index.js")
    _css = pathlib.Path("styles.css")
    value = traitlets.Int(0).tag(sync=True)

Read the documentation to learn more.

Packages

Beyond the primary Python package, anywidget provides an ecosystem of tooling to help you build and distribute custom Jupyter Widgets.

Name	Description	Version (click for changelogs)
`anywidget`	Primary Python package
`npm:@anywidget/types`	Client type declarations
`npm:@anywidget/vite`	Vite plugin
`npm:@anywidget/react`	React framework bridge
`npm:@anywidget/svelte`	Svelte framework bridge
`npm:create-anywidget`	CLI to bootstrap a new project
`jsr:@anywidget/deno`	Backend for Deno Jupyter kernel
`jsr:@anywidget/signals`	Signals bridge