Implementing Online Execution of Pandas Code on a Webpage: Lessons and Solutions

Hello everyone, I am Zaoqi.

Two days after promoting my "Illustrated Pandas" site (pandas.liuzaoqi.com), it already surpassed ten thousand visits.

Beyond pandas tutorials, many users are interested in how to execute pandas code online, so I will briefly share my exploration of this feature.

First, the rough requirements were identified:

⭐⭐⭐ Users can execute code on the current page.

Independent execution for different users.

No need to load additional code or perform extra operations.

The most important point is that users can run code in the current website and cell, with as few extra steps as possible.

After about half a month of trial and error, discarding several imperfect solutions, I finally managed to build a working prototype, and here are some of my experiences for reference.

Solution 1

The simplest idea was to use my own server: a front‑end input box sends the user’s code to the back‑end for execution and returns the result. However, this approach raises security concerns (e.g., preventing malicious commands like sudo rm -rf /*) and requires allocating separate resources for each user, which quickly exceeds the capacity of a modest 4‑CPU, 8‑GB server when many users run concurrently.

Moreover, the server‑upgrade costs and lack of prior experience with such a product made this solution impractical, so it was abandoned.

Solution 2

I then looked at online code execution services (as shown in the screenshot). While they can run arbitrary code, they focus solely on code execution and cannot host a full pandas tutorial. They also require manual code entry, cannot pre‑load data, and force a page redirect after each run, making the workflow cumbersome.

Using a crawler interface was considered but deemed too dependent on third‑party sites, so this path was also dropped.

JupyterHub

Discovering JupyterHub was a breakthrough: it can provision an isolated Jupyter Notebook for each user, eliminating permission concerns and allowing pre‑loaded code and data.

However, this approach does not satisfy the tutorial requirement because all content would need to reside inside notebooks, whereas I wanted a traditional website format.

Additionally, deploying JupyterHub involves Docker or Kubernetes operations, which are outside my expertise, leading me to abandon this option as well.

JupyterBook

Next I found JupyterBook, which converts notebooks into HTML pages via Sphinx and supports interactive code execution.

To make it work, the project must be uploaded to a public platform like Binder, which builds a Docker image for users. This enables online execution, but still requires users to navigate to a separate page, whereas I need execution directly on the current page.

Thebe Integration

The solution finally clicked when I discovered Thebe. It uses the JupyterLab API; by loading a small JavaScript snippet and pointing it to a Binder backend, code can be executed inline on the page.

Implementation is straightforward: since JupyterBook is built with Sphinx, I only need to add the sphinx_thebe plugin in the Sphinx configuration, which injects the necessary JavaScript.

With this setup, the first two requirements—inline execution and user isolation—are fully satisfied. The remaining challenge is reducing the amount of code the user must write.

In my site, even a simple pandas operation does not require the usual import pandas as pd or data‑loading code because these are pre‑loaded when the notebook starts. Users only need to add the thebe‑init tag to the relevant cell.

Despite the functional success, JupyterBook introduced many styling issues. The default CSS was not well‑suited for Chinese content, so I heavily customized several thousand lines of CSS and JavaScript, adjusting component positions to sub‑pixel precision, which took over a month to perfect.

In summary, this article provides a quick, incomplete overview of enabling online pandas code execution on a website. Many deployment and configuration details are omitted; I will share them in future posts.