anywidget 
custom jupyter widgets made easy
- ๐ ๏ธ create widgets without complicated cookiecutter templates
- ๐ publish to PyPI like any other Python package
- ๐ค prototype within
.ipynbor.pyfiles - ๐ run in Jupyter, JupyterLab, Google Colab, VSCode, and more
- โก develop with instant HMR, like modern web frameworks
Learn more in the Jupyter blog.
Installation
Warning: anywidget is new and under active development. It is not yet ready for production as APIs are subject to change.
anywidget is available on PyPI and
may be installed with pip:
pip install "anywidget[dev]"It is also available on conda-forge. If you have Anaconda or Miniconda installed on your computer, you can install anywidget with the following command:
conda install -c conda-forge anywidgetUsage
import anywidget
import traitlets
class CounterWidget(anywidget.AnyWidget):
# Widget front-end JavaScript code
_esm = """
export function render({ model, el }) {
let getCount = () => model.get("count");
let button = document.createElement("button");
button.innerHTML = `count is ${getCount()}`;
button.addEventListener("click", () => {
model.set("count", getCount() + 1);
model.save_changes();
});
model.on("change:count", () => {
button.innerHTML = `count is ${getCount()}`;
});
el.appendChild(button);
}
"""
# Stateful property that can be accessed by JavaScript & Python
count = 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")
count = traitlets.Int(0).tag(sync=True)Read the documentation to learn more.
Contributing
See CONTRIBUTING.md for information on how to develop anywidget locally.