Python in the Browser - Skulpt et MathPad

Thanks to the MathPad library based on Skulpt, you can embed executable Python code directly into your HTML pages using simple <python> tags.

Simple and Effective No complex configuration needed. Simply add the MathPad libraries and use <python> tags to create interactive Python code areas.

Setup

Include the required libraries in your HTML page header:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page with Python</title>

    <!-- JQuery (required) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <!-- Python with Skulpt -->
    <script src="https://skulpt.org/js/skulpt.min.js"></script>
    <script src="https://skulpt.org/js/skulpt-stdlib.js"></script>

    <!-- MathPad (CSS and JS) -->
    <link rel="stylesheet" href="https://www.sarmate.xyz/mathpad/mathpad.css">
    <script src="https://www.sarmate.xyz/mathpad/mathpad.js"></script>
</head>
<body>

    <!-- Your content here -->

</body>
</html>

Using Python Tags

Once the libraries are included, just use <python> tags to create an executable Python code area:

HTML

<python>
# This code is editable and executable by the userfor i in range(5):
    print("Hello " + str(i+1))

print("End of program")
</python>

The <python> tag automatically generates:

A code editor with syntax highlighting
A "Run" button to execute the code
An output area for results

Everything is Automatic Users can modify Python code, execute it, and see results directly on the page. No additional JavaScript code is needed.

Complete Example

Here is a complete page with a Python code area:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Python Exercise - Factorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://skulpt.org/js/skulpt.min.js"></script>
    <script src="https://skulpt.org/js/skulpt-stdlib.js"></script>
    <link rel="stylesheet" href="https://www.sarmate.xyz/mathpad/mathpad.css">
    <script src="https://www.sarmate.xyz/mathpad/mathpad.js"></script>
</head>
<body>

    <h1>Exercise: Calculate a Factorial</h1>

    <p>Complete the function below to calculate the factorial of a number.</p>
    <p>Reminder: 5! = 5 × 4 × 3 × 2 × 1 = 120</p>

    <python>
# Complete this functiondef factorial(n):
    if n <= 1:
        return 1
    else:
        return n * factorial(n - 1)

# Testsprint("5! =", factorial(5))
print("7! =", factorial(7))
print("0! =", factorial(0))
    </python>

</body>
</html>

Display Python Code (Non-Editable)

If you just want to display Python code without making it executable (e.g., to show an algorithm), use the <pythonImpr> tag:

HTML

<pythonImpr>
# This code is displayed with syntax highlightingbut cannot be executed or modified
def bubble_sort(list):
    for i in range(len(list)):
        for j in range(i+1, len(list)):
            if list[j] < list[i]:
                list[i], list[j] = list[j], list[i]
    return list
</pythonImpr>

Supported Python Features

Skulpt supports most of Python 3:

Variables and types: int, float, str, list, dict, tuple, set
Control structures: if/elif/else, for, while
Functions: def, return, default parameters, *args, **kwargs
Classes: class, inheritance, methods
Built-in modules: math, random, time, etc.

HTML

<python>
import math
import random

# Mathematical functionsprint("Pi =", math.pi)
print("Square root of 2 =", math.sqrt(2))

# Random numbersprint("Random number:", random.randint(1, 100))

# Lists and loopsnumbers = [1, 2, 3, 4, 5]
squares = [n**2 for n in numbers]
print("Squares:", squares)
</python>

Limitations Skulpt doesn't support some libraries like NumPy or Pandas. For advanced scientific calculations, prefer alternatives like Pyodide.

Teaching Tips

For Teachers <python> tags are ideal for creating interactive exercises. Students can modify code, run it, and see results immediately without leaving the page.

Offer code to complete with comments guiding the student
Add print() tests to verify results
Combine with JSXGraph for visual math exercises

Ready to Create Python Exercises?

Offer interactive programming exercises to your students

Create a free account