Jupyter Everywhere
Easily embed a console, a notebook, or a fully-fledged IDE on any web page.
In a previous blog post, we announced JupyterLite, a JupyterLab distribution that runs entirely in the web browser, backed by in-browser language kernels.
By default, JupyterLite ships with a Python kernel powered by Pyodide and IPython, bringing a wide variety of features from code completion to interactive visualizations.
The latest releases of JupyterLite now ship with a REPL application by default, that you can embed in any website.
Embed a live Python console on your website 🚀
Do you want to add an interactive code console to your website, so your visitors can run Python code directly in their browser without installing anything?
Let’s say you already have a static website up and running. This could for example be a Jekyll blog. With the JupyterLite REPL, you can embed the interactive console in your website with something as simple as the following code snippet:
<iframe
src="https://jupyterlite.github.io/demo/repl/index.html?kernel=python&toolbar=1"
width="100%"
height="500px"
>
</iframe>And there you have it, a live Python REPL embedded in your blog! 🎉
This example relies on the publicly available demo website deployed to GitHub Pages. However we recommend setting up your own JupyterLite deployment, so you can have full control and use custom configuration and extensions (see the Deploying your JupyterLite website section below).
Powering the NumPy documentation 🐍
The NumPy project had already been using an interactive console on the numpy.org documentation website. The previous console was powered by Thebe and mybinder.org. While this gave great flexibility and a way for users to try NumPy without installing anything on their machine, it required starting a new Jupyter Server on Binder for each user, and then waiting for a kernel to start before being able to type some code.
This setup worked for a while but started to become more difficult to maintain and operate.
With the JupyterLite-powered Python REPL, numpy.org is now able to provide an interactive code console and let anyone try NumPy in their browsers. This considerably reduces the number of resources needed and allows for a smoother and snappier user experience.
The REPL is currently based on the JupyterLab Code Console, which gives a familiar “look and feel” to Jupyter users. Other user interfaces such as a Single Executable Cell are also being considered for the next version of the REPL.
Try Jupyter 🟠
Another recent adopter of the JupyterLite stack is the official Jupyter website.
try.jupyter.org has been using the public-facing mybinder.org deployment to let users try the different Jupyter subprojects, such as Voilà and the Xeus-based kernels.
This setup has been working nicely for many years. However, the Binder project recently faced funding issues, which drastically reduced the overall capacity of the Binder federation. This means fewer resources are available to users for their projects, and this also impacted the Try Jupyter website.
To mitigate this, we decided to create a custom JupyterLite website and use it for some of the demos on Try Jupyter. Users can then continue to try some of the Jupyter interfaces in their browsers without installing anything on their machines. As a result, the JupyterLab and Jupyter Notebook demos now point to the new JupyterLite deployment.
The “Try Jupyter with JupyterLite” deployment also includes the jupyterlab-tour extension, offering a user-friendly tour of the Jupyter interface to newcomers.
Deploying your JupyterLite website 💡
Contrary to a regular Jupyter deployment, JupyterLite can be served as a simple static website without running a Python server. This makes it simpler to deploy, and cheaper to operate.
Below are some examples for deploying your own JupyterLite and Python REPL.
Deploy to GitHub Pages
GitHub Pages is one of the simplest ways to host a JupyterLite website.
This is what the demo repository available at https://github.com/jupyterlite/demo does by default. It lets you bootstrap your JupyterLite website with a few clicks, and deploy it to GitHub Pages within a couple of minutes.
After a few minutes, your website will be ready and you can then embed your live Python console with the following snippet:
<iframe
src="https://yourhandle.github.io/my-custom-deployment/repl/index.html?kernel=python&toolbar=1"
width="100%"
height="500px"
>
</iframe>
Deploy to Vercel or Netlify
Hosted platforms like Vercel and Netlify are good options to deploy a static JupyterLite website.
The REPLite project is an example deployed to Vercel, based on the following repository with some custom configuration: https://github.com/jtpio/replite
The Python REPL can be embedded with an IFrame:
<iframe src="https://replite.vercel.app/repl?kernel=python&toolbar=1" width="100%" height="100%">
</iframe>Here we use the ?kernel=python URL parameter to automatically choose the Python kernel on startup.
Deploying to ReadTheDocs using the Sphinx extension
Going the extra mile, jupyterlite-sphinx brings the power of JupyterLite to your Sphinx documentation. It automatically creates a JupyterLite deployment in your documentation website and provides some utilities for using that deployment easily.
If you are developing software, it’s a very convenient tool to let your users test your library directly on the documentation page!
This is also really useful for Jupyter users who want to easily share their work on readthedocs.org, GitHub Pages, or any other host that supports Sphinx documentation.
Installation
You can install jupyterlite-sphinx with pip:
pip install jupyterlite-sphinxThen add the extension to your conf.py file:
extensions = [
'jupyterlite_sphinx',
# And other sphinx extensions
# ...
]And that’s it! jupyterlite-sphinx will automatically deploy a JupyterLite website when building your docs with Sphinx.
Usage
jupyterlite-sphinx provides multiple Sphinx directives for embedding Python consoles and custom Notebooks in your documentation:
To embed a Python REPL similar to the NumPy.org one:
.. replite::
:kernel: python
:theme: JupyterLab Light
:width: 100%
:height: 600px print('Hello from a JupyterLite console!')
To embed a full Notebook:
.. retrolite:: my_notebook.ipynb
Finally, you might also want to embed the full JupyterLite UI:
.. jupyterlite::Note that the notebooks are saved in the browser local storage, so any work done on those Notebooks can be retrieved later when coming back to the web page with the same browser.
Documentation
You can find the jupyterlite-sphinx documentation with live examples following this link:
Example
You can find an example of jupyterlite-sphinx being used on ReadTheDocs here:
More examples
JupyterLite can be deployed on more platforms than just the ones mentioned above. Pretty much anything that can serve static files should work!
Feel free to check out the documentation to learn more about deploying your JupyterLite website on other platforms: https://jupyterlite.readthedocs.io/en/latest/deploying.html#hosted
Jupyter Everywhere 🌐
With JupyterLite gaining rapid adoption on widely visited websites such as numpy.org and try.jupyter.org, we envision Jupyter being adopted on more websites and documentation over the next months.
We hope to bring interactive computing with Jupyter to even more people than before and make it more accessible by lowering the barrier of entry.
Because JupyterLite can easily be extended with JupyterLab extensions, we also expect more Jupyter-based deployments and applications to flourish, making good reuse of the existing components that constitute the vibrant Jupyter ecosystem 🌸
Jupyter is language agnostic and more kernels are now available in JupyterLite, for example for Lua and SQLite based on the Xeus framework. Soon Jupyter will also power the documentation and websites of other languages, not just Python.
About the authors
Martin Renou is a Scientific Software Engineer at QuantStack and a Jupyter Distinguished Contributor. Martin works on a variety of projects, from xtensor and xeus-python in C++ to ipywidgets, ipyleaflet and bqplot in Python and TypeScript.
Jeremy Tuloup is a Scientific Software Engineer at QuantStack and a Jupyter Distinguished Contributor. Maintainer and contributor of JupyterLab, Jupyter Notebook, JupyterLite, Voilà, and projects within the Jupyter ecosystem.
