How to Embed a Jupyter Notebook on Any Website

We previously announced JupyterLite, a JupyterLab distribution that runs entirely in the browser. We share the material that will be useful to the authors of the Python library documentation before the start. flagship course in Data Science.

JupyterLite ships with a kernel by default. Pyodide And IPython and a variety of functionality, from code completion to interactive visualizations. In recent releases, JupyterLite comes with a REPL by default, which is installed on any site.

Embedding an interactive Python console on the site

Let’s say you have a working static website. For example, a blog on Jekyll. The interactive REPL console is built into it with a simple code snippet:

<iframe
  src="https://jupyterlite.github.io/demo/repl/index.html?kernel=python&toolbar=1"
  width="100%"
  height="500px"
>
</iframe>

That’s it: an interactive Python REPL is built in!

Above you see deployed on GitHub Pages demo site. To have full control over it, to use your own configuration and extensions, we recommend setting up a JupyterLite site deployment, which we’ll talk about later.

Loading the NumPy Documentation

The interactive console is already in use by the NumPy project on the documentation site numpy.org. The previous console worked on Thebe And mybinder.orgwhich gave great flexibility and the ability to try NumPy without installations on the computer.

Before entering the code, each user had to start a new Jupyter server in the binder module to Binder and wait for the kernel to start. For a while, this approach worked, but its maintenance was difficult.

Now users in numpy.org can use the interactive console and try NumPy in browsers with the Python REPL on JupyterLite. This greatly reduces the need for resources and gives a fast, smooth user experience:

Today, the REPL is based on the JupyterLab Code Console, familiar to Jupyter users in appearance. Other interfaces are considered as the next version of the REPL, for example Single Executable Cell.

Try Jupyter

The development of the JupyterLite toolkit has recently been started on the official Jupyter website. On the site try.jupyter.org uses a publicly available deployment technology mybinder.org. It allows you to try various subprojects of Jupyter, for example Voila and kernels on basis Xeus.

This configuration has been working well for many years, but recently the Binder project has encountered Problems with funding, due to which the total capacity of Binder was sharply reduced. This means that fewer resources are available to users for projects. This also affected the Try Jupyter site.

To mitigate the impact, we decided to create a site with JupyterLite for demos on the Try Jupyter site. Users can now experience Jupyter interfaces in browsers without installing anything on their computer. The JupyterLab and Jupyter Notebook demos redirect to a new JupyterLite deployment:

This deployment contains the extension jupyterlab-tourwhich provides a beginner-friendly overview of the Jupyter interface.

Deploying a website with JupyterLite

JupyterLite, unlike Jupyter, does not run a Python server and can be used as a simple static site when deployed. This simplifies deployment and reduces operating costs. Below you will see JupyterLite and REPL Python deployment examples.

Deploying JupyterLite on GitHub Pages

GitHub Pages is one of the easiest ways to host a website using JupyterLite. See what the default is capable of this demo repository. In a couple of clicks and a couple of minutes, it allows you to download a site from JupyterLite and deploy it to GitHub Pages:

In a matter of minutes, the site will be ready; With the following code snippet, you can embed an interactive console:

<iframe
  src="https://yourhandle.github.io/my-custom-deployment/repl/index.html?kernel=python&toolbar=1"
  width="100%"
  height="500px"
>
</iframe>

Deploying a website on Vercel or Netlify

Vercel and Netlify hosting is a good option for deploying a static site with JupyterLite. REPLite is an example project deployed in Vercel based on repository with custom configuration.

The Python REPL can be embedded using an HTML frame:

<iframe src="https://replite.vercel.app/repl?kernel=python&toolbar=1" width="100%" height="100%">
</iframe>

To automatically select the Python kernel at startup, use the URL parameter here ?kernel=python.

Deploying JupyterLite to ReadTheDocs using the Sphinx extension

jupyterlite sphinx brings the best of JupyterLite to the Sphinx documentation. It automatically deploys JupyterLite on the documentation site and provides utilities that make this deployment easier to use.

If you are a developer, then this is a very handy tool that allows users to test your library right on the documentation page. It is useful for Jupyter users to easily post the results of their work on readthedocs.orgGitHub Pages, or any other host that supports Sphinx documentation.

Installation

Install jupyterlite-sphinx using pip:

pip install jupyterlite-sphinx

Add the extension to the conf.py file:

extensions = [
    'jupyterlite_sphinx',
    # And other sphinx extensions
    # ...
]

That’s all. Thanks to jupyterlite-sphinx, a site with JupyterLite is deployed automatically when documents are created with Sphinx.

Application

jupyterlite-sphinx has a number of Sphinx directives to embed Python consoles and custom notebooks in the documentation.

To embed a REPL similar to NumPy.orgwrite:

.. replite::
   :kernel: python
   :theme: JupyterLab Light
   :width: 100%
   :height: 600px
    print('Hello from a JupyterLite console!')

To embed a full notepad:

.. retrolite:: my_notebook.ipynb

And here is the code to embed the full JupyterLite UI:

.. jupyterlite::

Notebooks are stored in the browser’s local storage, so any work you’ve done can be retrieved later when you return to the page.

Documentation

The jupyterlite-sphinx documentation with interactive examples is located here.

Here example of using jupyterlite-sphinx in ReadTheDocs.

Other examples

JupyterLite is deployed on almost all platforms that work with static files. To learn more about deploying JupyterLite on other platforms, take a look at documentation.

Jupyter is everywhere

Due to the rapid spread of JupyterLite on highly visited sites such as numpy.org And try.jupyter.org, we anticipate adoption of Jupyter on other sites and documentation in the coming months. With Jupyter, we hope to bring interactive computing to even more people and make it more accessible by lowering the barrier to entry.

The functionality of JupyterLite is easily extensible, so we also expect an increase in the number of deployments and applications based on Jupyter, which will allow reusable and effective components of the dynamic Jupyter ecosystem.

Jupyter is language agnostic and today more kernels are available in JupyterLite, for example Lua and SQLite are kernels based on framework Xeus. Jupyter will soon support documentation and sites not only in Python.

In the meantime, new kernels are being added to Jupyter, we will help you upgrade your skills or master a profession in IT that is in demand at any time:

Choose another in-demand profession.