A minimal example

This page illustrates a minimal setup to get Thebe Lab running, using mybinder as a kernel (i.e. computation backend) provider. This guide will go step-by-step in loading ThebeLab and activating it so that your code cells become active.

Loading and configuring ThebeLab

In order to use ThebeLab, we must first set its configuration. This must be done before ThebeLab is loaded from a CDN or a local script.

Here’s a sample configuration for ThebeLab

<!-- Configure and load Thebe !-->
<script type="text/x-thebe-config">
  {
    requestKernel: true,
    binderOptions: {
      repo: "binder-examples/requirements",
    },
  }
</script>

In this case, requestKernel: true asks Thebelab to request a kernel immediately upon being loaded, and binderOptions provides the repository that Binder will use to give us a Kernel.

Next, we’ll load Thebelab from a CDN:

<script src="https://unpkg.com/thebelab@0.4.0/lib/index.js"></script>

Adding a button to activate ThebeLab

There are many ways you can activate Thebelab. In this case, we’ll add a button to our page, and configure it to bootstrap Thebelab once it is clicked. We’ll do this with a little bit of Javascript.

Placing the button and adding the JavaScript to enable Thebelab was done with the code below:

<button id="activateButton"  style="width: 150px; height: 75px; font-size: 1.5em;">Activate</button>
<script>
var bootstrapThebe = function() {
    thebelab.bootstrap();
}

document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
</script>

Adding code cells

Finally, we’ll add code cells that ThebeLab can activate. By default, ThebeLab will look for any HTML elements with data-executable="true". We’ll also add a data-language="python" attribute to enable syntax highlighting with CodeMirror.

print("Hello!")

Here’s the code that created the cell above:

<pre data-executable="true" data-language="python">print("Hello!")</pre>

Press the ThebeLab button above to activate this cell, then press the “Run” button, or “Shift-Enter” to execute this cell.

Note

When ThebeLab is activated in this example, it must first ask Binder for a kernel. This may take several seconds.

Now let’s try another cell that generates a Matplotlib plot. Because we’ve configured ThebeLab to use Binder with an environment that has Numpy and Matplotlib, this works as expected. Try modifying the cell contents and re-running!

This is another cell, with plotting. Shift-Enter again!

%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt
x = np.linspace(0,10)
plt.plot(x, np.sin(x))
plt.plot(x, np.cos(x))

Here’s the HTML for the cell above:

<pre data-executable="true" data-language="python">
%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt
x = np.linspace(0,10)
plt.plot(x, np.sin(x))
plt.plot(x, np.cos(x))
</pre>

For more examples, check out More examples.