Running Python in the Browser with Pyodide: A Comprehensive Guide

← Back to Articles

While browsers natively support JavaScript, running Python code directly in a web browser has traditionally been challenging. However, thanks to projects like Pyodide, it's now possible to execute Python code in the browser. Let us look at the process of setting up and using Pyodide to run Python in your web applications.

What is Pyodide?

Pyodide is a project that brings the Python runtime to the browser using WebAssembly. It includes the core Python interpreter and many scientific computing libraries like NumPy, Pandas, and Matplotlib. This makes it possible to run complex Python code directly in the browser without server-side processing.

Setting Up Pyodide

To use Pyodide in your web application, you need to include its JavaScript loader. Here's a basic HTML template to get started:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python in the Browser</title>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
</head>
<body>
    <script>
        async function main() {
            let pyodide = await loadPyodide();
            console.log(pyodide.runPython("print('Hello from Python!')"));
        }
        main();
    </script>
</body>
</html>

This template loads Pyodide and runs a simple Python print statement. You can see the output in your browser's console.

Running Python Code

Once Pyodide is loaded, you can use the runPython() method to execute Python code. Here's an example that performs a simple calculation:

let result = pyodide.runPython(`
    def square(x):
        return x * x
    
    result = square(7)
    print(f"The square of 7 is {result}")
    result
`);
console.log("Result from Python:", result);

This code defines a Python function, calls it, and returns the result back to JavaScript.

Using Python Libraries

One of the powerful features of Pyodide is its ability to use many Python libraries. Here's an example using NumPy:

await pyodide.loadPackage("numpy");
let result = pyodide.runPython(`
    import numpy as np
    arr = np.array([1, 2, 3, 4, 5])
    mean = np.mean(arr)
    print(f"The mean of the array is {mean}")
    mean
`);
console.log("Mean calculated in Python:", result);

This code loads the NumPy package and uses it to calculate the mean of an array.

Interacting with the DOM

Pyodide allows Python code to interact with the webpage's DOM through a proxy. Here's an example:

<div id="output"></div>
<script>
    async function updateDOM() {
        let pyodide = await loadPyodide();
        pyodide.runPython(`
            from js import document
            output_div = document.getElementById('output')
            output_div.innerHTML = "This content was set by Python!"
        `);
    }
    updateDOM();
</script>

This code uses Python to modify the content of a div element on the page.

Handling User Input

You can also use Pyodide to process user input. Here's a simple example with an input field:

<input id="user-input" type="text">
<button onclick="processPython()">Run Python</button>
<div id="output"></div>

<script>
    let pyodide;
    
    async function initializePyodide() {
        pyodide = await loadPyodide();
    }

    async function processPython() {
        if (!pyodide) await initializePyodide();
        
        let input = document.getElementById('user-input').value;
        let result = pyodide.runPython(`
            input_string = "${input}"
            reversed_string = input_string[::-1]
            print(f"Reversed string: {reversed_string}")
            reversed_string
        `);
        document.getElementById('output').innerText = "Python says: " + result;
    }

    initializePyodide();
</script>

This example takes user input, reverses the string using Python, and displays the result.

Running Pyodide in Node.js Applications

We may sometimes want to integrate Python code in a Node.js project. Pyodide could be a possible solution. Let us look at an example.

Create a Node.js project called pyodide-example:

mkdir pyodide-example
cd pyodide-example
npm init -y

Install pyodide:

npm install pyodide

Create a file called index.js with the following contents:

const { loadPyodide } = require("pyodide");

async function main() {
  let pyodide = await loadPyodide();

  await pyodide.loadPackage("numpy");
  // Run Python code
  let result = await pyodide.runPythonAsync(`
    import numpy as np
    arr = np.array([1, 2, 3, 4, 5])
    mean = np.mean(arr)
    print(f"The mean of the array is {mean}")
    mean
  `);

  // Print the result
  console.log("Mean calculated in Python:", result);
}

main();

Run it:

node index.js

Conclusion

Running Python in the browser opens up new possibilities for web applications, especially in fields like data science and scientific computing. Pyodide makes it possible to leverage Python's extensive ecosystem of libraries directly in the browser, enabling more complex computations and data processing on the client side. We can also use Pyodide to execute Python code in Node.js applications.

While this approach has many benefits, it's important to consider factors like load time (Pyodide is quite large) and performance when deciding whether to use Python in the browser for your project. For many applications, especially those requiring complex calculations or data processing, the benefits can far outweigh the costs.