Thebe

Thebe turns your static HTML pages into interactive ones, powered by a kernel. It is the evolution of the original Thebe project with javascript APIs provided by JupyterLab.

For example, see the following code cell:

%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt
plt.ion()
fig, ax = plt.subplots()
ax.scatter(*np.random.randn(2, 100), c=np.random.randn(100))
ax.set(title="Wow, an interactive plot!")

It is static for now. You can activate Thebe by pressing the button below. This will ask mybinder.org for a Python kernel, and turn the code cell into an interactive one with outputs!

Try clicking the button. The cell will be come active!

You can press “run” in order to run the contents of the cell and display the result (be patient, it will take a few moments for Binder to start the kernel).

Getting Started

To get started, check out Get started.

Examples

For more examples showing how to configure, use, and activate Thebe, see the list below. We recommend browsing the raw HTML of each one in order to see how Thebe is used.

Examples

• A minimal example
• Bqplot Example
• Ipyleaflet Example
• Ipympl Example
• Plotly Example
• IPyCytoscape Example
• Pythreejs Example
• Matplotlib + Ipywidgets Interact Example

HTML based examples

• Built in status field and styling

• Built in activate button

• Step-by-step demo

• Making use of Jupyter interactive widgets

• Alternative computational environments; code cells with prompts and outputs

• Using a local Jupyter server as kernel provider

• Setting predefined output for cells

• Example of a custom launch button, loading from unpgk.com

Source code for these examples can be found in `thebe/docs/_static/html_examples folder.<https://github.com/executablebooks/thebe/tree/master/examples>`_

Attention

Use the latest release of thebe on unpkg These examples build a _local_ version of thebe in order to show off the latest features. If you’d like to instead load the latest _release_ of Thebe, replace the <script> elements with the following:

`html <script type="text/javascript" src="https://unpkg.com/thebe@latest"></script> `

Serve these examples indepenently by running yarn serve:examples in your local development environment.

External Examples

• Thebe in use for SageMath documentation (about) Showcases a fancy activate button, and fetching thebe and running computations locally when possible. Relevant files:

  • thebe.html

  • thebe_status_field.js

  • thebe_status_field.js

• Thebe in use for GAP documentation

Acknowledgements

thebe was originally developed as a part of OpenDreamKit - Horizon 2020 European Research Infrastructure project (676541).