Add files for a JupyterLite demo

[jtpio]

Opening this PR early (still as a draft) to see if there would be an interest to offer a JupyterLite demo, so users can try anywidget in the browser easily.

This demo is based on jupyterlite-xeus (https://jupyterlite-xeus.readthedocs.io) and installs anywidget from conda-forge, so the example notebook works without additional code.

For now it likely only support inline _esm and _css, but should let users author a simple widget in their browser. Maybe there could then be a way to to "mount" additional files (such as index.js and index.css) so they are editable in JupyterLab, and correctly picked up by anywidget.

Here is a demo screencast:

anywidget-jupyterlite-demo.webm

If there is interest, I can look into integrating this with the existing documentation (maybe even inline a notebook in the docs somewhere).

TODO

• Environment files to create the JupyterLite demo
• Integrate with the docs
• Contributing docs

[netlify]

✅ Deploy Preview for anywidget canceled.

Name	Link
🔨 Latest commit	a6e3fa1
🔍 Latest deploy log	https://app.netlify.com/sites/anywidget/deploys/65d8688ef5e14d0008efe34f

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.21%. Comparing base (12ca2f8) to head (0b91cc0).
Report is 131 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #451      +/-   ##
==========================================
- Coverage   98.45%   97.21%   -1.25%     
==========================================
  Files           8        8              
  Lines         452      502      +50     
==========================================
+ Hits          445      488      +43     
- Misses          7       14       +7     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jtpio]

Actually this can already easily be tested on any JupyterLite deployment that has anywidget installed as a build dependency (to properly pick up the lab extension). For example here: https://jtp.io/lit/lab/index.html?path=pyodide/anywidget.ipynb

[manzt]

Wow, this is fantastic! I looked into setting up a JupyterLite notebook a while back but ran into some hiccups getting the frontend JS for anywidget to be discovered by the kernel. I'm guessing you need a preconfigured JupyterLite instance with this enabled.

Overall, I'd love to build "the notebook" for teaching widgets (via anywidget). It would be awesome to have this live in a single Jupyter notebook that we could link folks to to learn about specific widget concepts. In theory, we could refer to this rather than "Jupyter Widgets: the good parts" section of the documentation.

[jtpio]

I'm guessing you need a preconfigured JupyterLite instance with this enabled.

Yes, the anywidget Python package needs to be installed in the build environment so its JupyterLab extension can be found at build time.

Playing a bit more with it, it actually supports reading files that can be edited from the UI directly (but no HMR):

anywidget-jupyterlite-files.webm

[manzt]

Playing a bit more with it, it actually supports reading files that can be edited from the UI directly (but no HMR):

Wow, this is great! I wouldn't expect HMR to work (although it would be slick), but the ability to sketch out a widget entirely in the browser is really really nice. I might start using this to hack out some widget ideas. With the ability to pip install python packages and import js packages via ESM.sh, it's really powerful prototyping environment.

[jtpio]

Indeed this would be a low-friction way for trying something out quickly!

@manzt how do you see something like this integrated in the repo?

I quickly looked into adding this to the Astro docs site:

Although this would require installing the jupyterlite CLI, anywidget and a few other Python packages to be able to index files and potentially enable more features.

This could complicate the Netlify build and setup. Maybe a first step could be to deploy this JupyterLite demo to GitHub pages, and link to a full blown JupyterLite from anywidget.dev?

[jtpio]

This could complicate the Netlify build and setup. Maybe a first step could be to deploy this JupyterLite demo to GitHub pages, and link to a full blown JupyterLite from anywidget.dev?

For reference it's possible to run the jupyter lite build command on hosts like Vercel and Netlify (https://jupyterlite.readthedocs.io/en/latest/howto/deployment/vercel-netlify.html). Although it's usually better to use micromamba, pixi or maybe hatch shell to create a virtual environment on these hosts during the build step, to not interfere with their Python setup.

[jtpio]

Maybe a first step could be to deploy this JupyterLite demo to GitHub pages

Just put up a self-contained demo here: https://github.com/jtpio/anywidget-lite

[manzt]

This is great. I have kind of a hectic week so I might be a bit blocked on thinking about integrating into the documentation. However, I really like the idea. We have a "notebook" section to the docs, which prerenders notebooks in the astro site. I'd probably be in favor of moving that section to embedded JupyterLite, and we could start added notebooks that illustrate specific widget concepts with anywidget. I'd like to imagine "the notebook" which covers all aspects of widgets. Kind of like the Svelte tutorial or the Rust Book.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0b91cc0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR