In recent years, WebAssembly (often abbreviated as WASM) has emerged as an interesting technology that extends web browsers’ capabilities far beyond the traditional realms of HTML, CSS, and JavaScript.  As a Python developer, one particularly exciting application is the ability to run Python code directly in the browser. In this article, I’ll explore what WebAssembly is (and its relation to the Pyodide library), talk about its benefits and everyday use cases, and dive into some practical examples of how you can use WebAssembly to run Python programs on the web. These tools can also benefit data scientists and ML professionals. Pyodide brings a significant portion of the scientific Python stack (NumPy, Pandas, Scikit-learn, Matplotlib, SciPy, etc.) to the browser, meaning that using familiar tools and libraries during code development is possible. It can also be useful for demonstration purposes. As you’ll see in my final example, combining Python’s data processing power with HTML, CSS, and JavaScript for UI, you can quickly build interactive dashboards or tools without needing a separate backend for many use cases. What is WebAssembly? Webassembly is a low-level binary instruction format designed as a portable target for compiling high-level languages, such as C, C++, Rust, and even Python. It was created to enable high-performance applications on the web without some of the pitfalls of traditional JavaScript execution, such as run-time speed. Some key aspects of WebAssembly include: Portability. WebAssembly modules run consistently across all modern browsers. Performance. The binary format is compact and can be parsed quickly, which allows near-native execution speed. Security. Running in a sandboxed environment, WebAssembly provides strong security guarantees. Language Agnosticism. Although browsers primarily support JavaScript, WebAssembly enables developers to write code in other languages and compile it to WebAssembly (wasm). What Can WebAssembly Be Used For? WebAssembly has a wide array of applications. Some of the most common use cases include:- High-Performance Web Apps. WebAssembly can help applications such as games, image and video editors, and simulations achieve near-native performance. Porting Legacy Code. Code written in C, C++, or Rust can be compiled into WebAssembly, allowing developers to reuse existing libraries and codebases on the web. Multimedia Processing. Audio and video processing libraries benefit from webassembly’s speed, enabling more complex processing tasks in real-time. Scientific Computing. Heavy computations such as machine learning, data visualisation, or numerical simulations can be offloaded to WebAssembly modules. Running Multiple Languages. Projects like Pyodide allow Python (and its extensive ecosystem) to be executed in the browser without requiring a server backend. If you frequently code in Python, that last point should make your ears prick up, so let’s dive into that aspect further. Running Python on the Web Traditionally, Python runs on the server or in desktop applications. However, thanks to initiatives like Pyodide, Python can run in the browser via WebAssembly. Pyodide compiles the CPython interpreter code into WebAssembly, allowing you to execute Python code and use many popular third-party libraries directly in your web application. And this isn’t just a gimmick. There are several advantages to doing this, including:- Using Python’s extensive library ecosystem, including packages for data science (NumPy, Pandas, Matplotlib) and machine learning (Scikit-Learn, TensorFlow). Enhanced responsiveness as fewer round trips to a server are required. It is a simpler deployment as the entire application logic can reside in the front end. We’ve mentioned Pyodide a few times already, so let’s take a closer look at what exactly Pyodide is. What is Pyodide The idea behind Pyodide was born from the growing need to run Python code directly in the browser without relying on a traditional server-side setup. Traditionally, web applications had depended on JavaScript for client-side interactions, leaving Python confined to back-end or desktop applications. However, with the advent of WebAssembly, an opportunity arose to bridge this gap. Mozilla Research recognised the potential of this approach and set out to port CPython, the reference implementation of Python, to WebAssembly using the Emscripten toolchain. This effort was about running Python in the browser and unlocking a new world of interactive, client-side applications powered by Python’s rich set of libraries for data science, numerical computing, and more.  To summarise, at its core, Pyodide is a port of CPython compiled into WebAssembly. This means that when you run Python code in the browser using Pyodide, you execute a fully functional Python interpreter optimised for the web environment. Right, it’s time to look at some code. Setting up a development environment Before we start coding, let’s set up our development environment. The best practice is to create a separate Python environment where you can install any necessary software and experiment with coding, knowing that anything you do in this environment won’t affect the rest of your system. I use conda for this, but you can use whatever method you know best suits you. Note that I’m using Linux (WSL2 on Windows). #create our test environment (base) $ conda create -n wasm_test python=3.12 -y # Now activate it (base) $ conda activate wasm_test Now that our environment is set up, we can install the required libraries and software. # # (wasm_test) $ pip install jupyter nest-asyncio Now type in jupyter notebook into your command prompt. You should see a jupyter notebook open in your browser. If that doesn’t happen automatically, you’ll likely see a screenful of information after the jupyter notebook command. Near the bottom, there will be a URL that you should copy and paste into your browser to initiate the Jupyter Notebook. Your URL will be different to mine, but it should look something like this:- http://127.0.0.1:8888/tree?token=3b9f7bd07b6966b41b68e2350721b2d0b6f388d248cc69da Code example 1 — Hello World equivalent using Pyodide Let’s start with the easiest example possible. The simplest way to include Pyodide in your HTML page is via a Content Delivery Network (CDN). We then print out the text “Hello World!” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello, World! with Pyodide</title> </head> <body> <h1>Python Hello, World!</h1> <button id="runCode">Run Python Code</button> <pre id="result"></pre> <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script> <script> async function runHelloWorld() { const pyodide = await loadPyodide(); const output = await pyodide.runPythonAsync(` print("Hello, World!") `); document.getElementById('result').textContent = output || "Check the console for output."; } document.getElementById('runCode').addEventListener('click', runHelloWorld); </script> </body> </html> I ran the above code in W3Schools HTML TryIt editor and got this, Image by Author When the button is clicked, Pyodide runs the Python code that prints “Hello, World!”. We don’t see anything printed on the screen, as it is printed to the console by default. We’ll fix that in our following example. Code Example 2 — Printing output to the browser In our second example, we’ll use Pyodide to run Python code in the browser that will perform a simple mathematical calculation. In this case, we will calculate the square root of 16 and output the result to the browser.  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pyodide Example</title> </head> <body> <h1>Running Python in the Browser with Pyodide</h1> <button id="runPython">Run Python Code</button> <pre id="output"></pre> <!-- Load Pyodide from the CDN --> <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script> <script> async function main() { // Load Pyodide const pyodide = await loadPyodide(); document.getElementById('runPython').addEventListener('click', async () => { // Run a simple Python command let result = await pyodide.runPythonAsync(` import math math.sqrt(16) `); document.getElementById('output').textContent = 'Square root of 16 is: ' + result; }); } main(); </script> </body> </html> Running the above code in the W3Schools TryIT browser, I got this output. Image by Author Code Example 3 – Calling Python Functions from JavaScript Another valuable and powerful feature of using Pyodide is the ability to call Python functions from JavaScript and vice versa.  In this example, we create a Python function that performs a simple mathematical operation—calculating the factorial of a number—and call it from JavaScript code. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Call Python from JavaScript</title> </head> <body> <h1>Calculate the Factorial of a Number</h1> <input type="number" id="numberInput" placeholder="Enter a number" /> <button id="calcFactorial">Calculate Factorial</button> <pre id="result"></pre> <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script> <script> let pyodideReadyPromise = loadPyodide(); async function calculateFactorial() { const pyodide = await pyodideReadyPromise; // Define a Python function for calculating factorial await pyodide.runPythonAsync(` def factorial(n): if n == 0: return 1 else: return n * factorial(n - 1) `); // Get the input value from the HTML form const n = Number(document.getElementById('numberInput').value); // Call the Python factorial function let result = pyodide.globals.get("factorial")(n); document.getElementById('result').textContent = `Factorial of ${n} is ${result}`; } document.getElementById('calcFactorial').addEventListener('click', calculateFactorial); </script> </body> </html> Here is a sample output when running on W3Schools. I won’t include the code section this time, just the output. Image by Author Code Example 4— Using Python Libraries, e.g. NumPy Python’s power comes from its rich ecosystem of libraries. With Pyodide, you can import and use popular libraries like NumPy for numerical computations.  The following example demonstrates how to perform array operations using NumPy in the browser. The Numpy library is loaded using the pyodide.loadPackage function. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>NumPy in the Browser</title> </head> <body> <h1>Matrix Multiplication with NumPy</h1> <button id="runNumPy">Run NumPy Code</button> <pre id="numpyResult"></pre> <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script> <script> async function runNumPyCode() { // Load the Pyodide interpreter const pyodide = await loadPyodide(); // Load the NumPy package before using it await pyodide.loadPackage("numpy"); // Run Python code to perform a matrix multiplication let result = await pyodide.runPythonAsync(` import numpy as np A = np.array([[1, 2], [3, 4]]) B = np.array([[2, 0], [1, 2]]) C = np.matmul(A, B) C.tolist() # Convert the numpy array to a Python list for display `); // Convert the Python result (PyProxy) to a native JavaScript object // so it displays properly document.getElementById('numpyResult').textContent = 'Matrix Multiplication Result: ' + JSON.stringify(result.toJs()); } // Set up the event listener for the button document.getElementById('runNumPy').addEventListener('click', runNumPyCode); </script> </body> </html> Image by Author Code Example 5— Using Python libraries, e.g. matplotlib Another powerful aspect of running Python in the browser is the ability to generate visualisations. With Pyodide, you can use GUI libraries such as Matplotlib to create plots dynamically. Here’s how to generate and display a simple plot on a canvas element. In this example, we create a quadratic plot (y = x²) using Matplotlib, save the image to an in-memory buffer as a PNG, and encode it as a base64 string before displaying it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Matplotlib in the Browser</title> </head> <body> <h1>Interactive Plot with Matplotlib</h1> <button id="plotGraph">Generate Plot</button> <img id="plotImage" alt="Plot will appear here" /> <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script> <script> async function generatePlot() { // Load the Pyodide interpreter const pyodide = await loadPyodide(); // Load the matplotlib package before using it await pyodide.loadPackage("matplotlib"); // Run Python code that creates a plot and returns it as a base64 encoded PNG image let imageBase64 = await pyodide.runPythonAsync(` import matplotlib.pyplot as plt import io, base64 # Create a simple plot plt.figure() plt.plot([0, 1, 2, 3], [0, 1, 4, 9], marker='o') plt.title("Quadratic Plot") plt.xlabel("X Axis") plt.ylabel("Y Axis") # Save the plot to a bytes buffer buf = io.BytesIO() plt.savefig(buf, format='png') buf.seek(0) # Encode the image in base64 and return it base64.b64encode(buf.read()).decode('ascii') `); // Set the src attribute of the image element to display the plot document.getElementById('plotImage').src = "data:image/png;base64," + imageBase64; } // Add event listener to the button to generate the plot document.getElementById('plotGraph').addEventListener('click', generatePlot); </script> </body> </html> Image by Author Code Example 6: Running Python in a Web Worker For more complex applications or when you need to ensure that heavy computations do not block the main UI thread, you can run Pyodide in a Web Worker. Web Workers allow you to run scripts in background threads, keeping your application responsive. Below is an example of how to set up Pyodide in a Web Worker. We perform a calculation and simulate the calculation running for a while by introducing delays using the sleep() function. We also display a continuously updating counter showing the main UI running and responding normally.  We’ll need three files for this:- an index.html file and two JavaScript files. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pyodide Web Worker Example</title> </head> <body> <h1>Running Python in a Web Worker</h1> <button id="startWorker">Start Computation</button> <p id="status">Status: Idle</p> <pre id="workerOutput"></pre> <script src="main.js"></script> </body> </html> worker.js // Load Pyodide from the CDN inside the worker self.importScripts("https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"); async function initPyodide() { self.pyodide = await loadPyodide(); // Inform the main thread that Pyodide has been loaded self.postMessage("Pyodide loaded in Worker"); } initPyodide(); // Listen for messages from the main thread self.onmessage = async (event) => { if (event.data === 'start') { // Execute a heavy computation in Python within the worker. // The compute function now pauses for 0.5 seconds every 1,000,000 iterations. let result = await self.pyodide.runPythonAsync(` import time def compute(): total = 0 for i in range(1, 10000001): # Loop from 1 to 10,000,000 total += i if i % 1000000 == 0: time.sleep(0.5) # Pause for 0.5 seconds every 1,000,000 iterations return total compute() `); // Send the computed result back to the main thread self.postMessage("Computed result: " + result); } }; main.js // Create a new worker from worker.js const worker = new Worker('worker.js'); // DOM elements to update status and output const statusElement = document.getElementById('status'); const outputElement = document.getElementById('workerOutput'); const startButton = document.getElementById('startWorker'); let timerInterval; let secondsElapsed = 0; // Listen for messages from the worker worker.onmessage = (event) => { // Append any message from the worker to the output outputElement.textContent += event.data + "\n"; if (event.data.startsWith("Computed result:")) { // When computation is complete, stop the timer and update status clearInterval(timerInterval); statusElement.textContent = `Status: Completed in ${secondsElapsed} seconds`; } else if (event.data === "Pyodide loaded in Worker") { // Update status when the worker is ready statusElement.textContent = "Status: Worker Ready"; } }; // When the start button is clicked, begin the computation startButton.addEventListener('click', () => { // Reset the display and timer outputElement.textContent = ""; secondsElapsed = 0; statusElement.textContent = "Status: Running..."; // Start a timer that updates the main page every second timerInterval = setInterval(() => { secondsElapsed++; statusElement.textContent = `Status: Running... ${secondsElapsed} seconds elapsed`; }, 1000); // Tell the worker to start the heavy computation worker.postMessage('start'); }); To run this code, create all three files above and put them into the same directory on your local system. In that directory, type in the following command. $ python -m http.server 8000 Now, in your browser, type this URL into it. http://localhost:8000/index.html You should see a screen like this. Image by Author Now, if you press the <strong>Start Computation</strong> button, you should see a counter displayed on the screen, starting at 1 and ticking up by 1 every second until the computation is complete and its final result is displayed — about 5 seconds in total.  This shows that the front-end logic and computation are not constrained by the work that’s being done by the Python code behind the button.  Image by Author Code Example 7: Running a simple data dashboard For our final example, I’ll show you how to run a simple data dashboard directly in your browser. Our source data will be synthetic sales data in a CSV file. We need three files for this, all of which should be in the same folder. sales_data.csv The file I used had 100,000 records, but you can make this file as big or small as you like. Here are the first twenty records to give you an idea of what the data looked like. Date,Category,Region,Sales 2021-01-01,Books,West,610.57 2021-01-01,Beauty,West,2319.0 2021-01-01,Electronics,North,4196.76 2021-01-01,Electronics,West,1132.53 2021-01-01,Home,North,544.12 2021-01-01,Beauty,East,3243.56 2021-01-01,Sports,East,2023.08 2021-01-01,Fashion,East,2540.87 2021-01-01,Automotive,South,953.05 2021-01-01,Electronics,North,3142.8 2021-01-01,Books,East,2319.27 2021-01-01,Sports,East,4385.25 2021-01-01,Beauty,North,2179.01 2021-01-01,Fashion,North,2234.61 2021-01-01,Beauty,South,4338.5 2021-01-01,Beauty,East,783.36 2021-01-01,Sports,West,696.25 2021-01-01,Electronics,South,97.03 2021-01-01,Books,West,4889.65 index.html This is the main GUI interface to our dashboard. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pyodide Sales Dashboard</title> <style> body { font-family: Arial, sans-serif; text-align: center; padding: 20px; } h1 { color: #333; } input { margin: 10px; } select, button { padding: 10px; font-size: 16px; margin: 5px; } img { max-width: 100%; display: block; margin: 20px auto; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f4f4f4; } .sortable th { cursor: pointer; user-select: none; } .sortable th:hover { background-color: #e0e0e0; } </style> <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script> </head> <body> <h1> Pyodide Sales Dashboard</h1> <input type="file" id="csvUpload" accept=".csv"> <label for="metricSelect">Select Sales Metric:</label> <select id="metricSelect"> <option value="total_sales">Total Sales</option> <option value="category_sales">Sales by Category</option> <option value="region_sales">Sales by Region</option> <option value="monthly_trends">Monthly Trends</option> </select> <br><br> <button id="analyzeData">Analyze Data</button> <h2> Sales Data Visualization</h2> <img id="chartImage" alt="Generated Chart" style="display: none"> <h2> Sales Data Table</h2> <div id="tableOutput"></div> <script src="main.js"></script> </script> </body> </html> main.js This contains our main Python pyodide code. async function loadPyodideAndRun() { const pyodide = await loadPyodide(); await pyodide.loadPackage(["numpy", "pandas", "matplotlib"]); document.getElementById("analyzeData").addEventListener("click", async () => { const fileInput = document.getElementById("csvUpload"); const selectedMetric = document.getElementById("metricSelect").value; const chartImage = document.getElementById("chartImage"); const tableOutput = document.getElementById("tableOutput"); if (fileInput.files.length === 0) { alert("Please upload a CSV file first."); return; } // Read the CSV file const file = fileInput.files[0]; const reader = new FileReader(); reader.readAsText(file); reader.onload = async function (event) { const csvData = event.target.result; await pyodide.globals.set('csv_data', csvData); await pyodide.globals.set('selected_metric', selectedMetric); const pythonCode = 'import sys\n' + 'import io\n' + 'import numpy as np\n' + 'import pandas as pd\n' + 'import matplotlib\n' + 'matplotlib.use("Agg")\n' + 'import matplotlib.pyplot as plt\n' + 'import base64\n' + '\n' + '# Capture output\n' + 'output_buffer = io.StringIO()\n' + 'sys.stdout = output_buffer\n' + '\n' + '# Read CSV directly using csv_data from JavaScript\n' + 'df = pd.read_csv(io.StringIO(csv_data))\n' + '\n' + '# Ensure required columns exist\n' + 'expected_cols = {"Date", "Category", "Region", "Sales"}\n' + 'if not expected_cols.issubset(set(df.columns)):\n' + ' print(" CSV must contain \'Date\', \'Category\', \'Region\', and \'Sales\' columns.")\n' + ' sys.stdout = sys.__stdout__\n' + ' exit()\n' + '\n' + '# Convert Date column to datetime\n' + 'df["Date"] = pd.to_datetime(df["Date"])\n' + '\n' + 'plt.figure(figsize=(12, 6))\n' + '\n' + 'if selected_metric == "total_sales":\n' + ' total_sales = df["Sales"].sum()\n' + ' print(f" Total Sales: ${total_sales:,.2f}")\n' + ' # Add daily sales trend for total sales view\n' + ' daily_sales = df.groupby("Date")["Sales"].sum().reset_index()\n' + ' plt.plot(daily_sales["Date"], daily_sales["Sales"], marker="o")\n' + ' plt.title("Daily Sales Trend")\n' + ' plt.ylabel("Sales ($)")\n' + ' plt.xlabel("Date")\n' + ' plt.xticks(rotation=45)\n' + ' plt.grid(True, linestyle="--", alpha=0.7)\n' + ' # Show top sales days in table\n' + ' table_data = daily_sales.sort_values("Sales", ascending=False).head(10)\n' + ' table_data["Sales"] = table_data["Sales"].apply(lambda x: f"${x:,.2f}")\n' + ' print("<h3>Top 10 Sales Days</h3>")\n' + ' print(table_data.to_html(index=False))\n' + 'elif selected_metric == "category_sales":\n' + ' category_sales = df.groupby("Category")["Sales"].agg([\n' + ' ("Total Sales", "sum"),\n' + ' ("Average Sale", "mean"),\n' + ' ("Number of Sales", "count")\n' + ' ]).sort_values("Total Sales", ascending=True)\n' + ' category_sales["Total Sales"].plot(kind="bar", title="Sales by Category")\n' + ' plt.ylabel("Sales ($)")\n' + ' plt.xlabel("Category")\n' + ' plt.grid(True, linestyle="--", alpha=0.7)\n' + ' # Format table data\n' + ' table_data = category_sales.copy()\n' + ' table_data["Total Sales"] = table_data["Total Sales"].apply(lambda x: f"${x:,.2f}")\n' + ' table_data["Average Sale"] = table_data["Average Sale"].apply(lambda x: f"${x:,.2f}")\n' + ' print("<h3>Sales by Category</h3>")\n' + ' print(table_data.to_html())\n' + 'elif selected_metric == "region_sales":\n' + ' region_sales = df.groupby("Region")["Sales"].agg([\n' + ' ("Total Sales", "sum"),\n' + ' ("Average Sale", "mean"),\n' + ' ("Number of Sales", "count")\n' + ' ]).sort_values("Total Sales", ascending=True)\n' + ' region_sales["Total Sales"].plot(kind="barh", title="Sales by Region")\n' + ' plt.xlabel("Sales ($)")\n' + ' plt.ylabel("Region")\n' + ' plt.grid(True, linestyle="--", alpha=0.7)\n' + ' # Format table data\n' + ' table_data = region_sales.copy()\n' + ' table_data["Total Sales"] = table_data["Total Sales"].apply(lambda x: f"${x:,.2f}")\n' + ' table_data["Average Sale"] = table_data["Average Sale"].apply(lambda x: f"${x:,.2f}")\n' + ' print("<h3>Sales by Region</h3>")\n' + ' print(table_data.to_html())\n' + 'elif selected_metric == "monthly_trends":\n' + ' df["Month"] = df["Date"].dt.to_period("M")\n' + ' monthly_sales = df.groupby("Month")["Sales"].agg([\n' + ' ("Total Sales", "sum"),\n' + ' ("Average Sale", "mean"),\n' + ' ("Number of Sales", "count")\n' + ' ])\n' + ' monthly_sales["Total Sales"].plot(kind="line", marker="o", title="Monthly Sales Trends")\n' + ' plt.ylabel("Sales ($)")\n' + ' plt.xlabel("Month")\n' + ' plt.xticks(rotation=45)\n' + ' plt.grid(True, linestyle="--", alpha=0.7)\n' + ' # Format table data\n' + ' table_data = monthly_sales.copy()\n' + ' table_data["Total Sales"] = table_data["Total Sales"].apply(lambda x: f"${x:,.2f}")\n' + ' table_data["Average Sale"] = table_data["Average Sale"].apply(lambda x: f"${x:,.2f}")\n' + ' print("<h3>Monthly Sales Analysis</h3>")\n' + ' print(table_data.to_html())\n' + '\n' + 'plt.tight_layout()\n' + '\n' + 'buf = io.BytesIO()\n' + 'plt.savefig(buf, format="png", dpi=100, bbox_inches="tight")\n' + 'plt.close()\n' + 'img_data = base64.b64encode(buf.getvalue()).decode("utf-8")\n' + 'print(f"IMAGE_START{img_data}IMAGE_END")\n' + '\n' + 'sys.stdout = sys.__stdout__\n' + 'output_buffer.getvalue()'; const result = await pyodide.runPythonAsync(pythonCode); // Extract and display output with markers const imageMatch = result.match(/IMAGE_START(.+?)IMAGE_END/); if (imageMatch) { const imageData = imageMatch[1]; chartImage.src = 'data:image/png;base64,' + imageData; chartImage.style.display = 'block'; // Remove the image data from the result before showing the table tableOutput.innerHTML = result.replace(/IMAGE_START(.+?)IMAGE_END/, '').trim(); } else { chartImage.style.display = 'none'; tableOutput.innerHTML = result.trim(); } }; }); } loadPyodideAndRun(); Like the previous example, you can run this as follows. Create all three files and place them in the same directory on your local system. In that directory, on a command terminal, type in the following, $ python -m http.server 8000 Now, in your browser, type this URL into it. http://localhost:8000/index.html Initially, your screen should look like this, Image by Author Click on the <strong>Choose File</strong> button and select the data file you created to input into your dashboard. After that, choose a suitable metric from the <strong>Select Sales Metric</strong> dropdown list and click the <strong>Analyze data</strong> button. Depending on what options you choose to display, you should see something like this on your screen. Image by Author Summary In this article, I described how using Pyodide and WebAssembly, we can run Python programs inside our browsers and showed several examples that demonstrate this. I talked about WebAssembly’s role as a portable, high-performance compilation target that extends browser capabilities and how this is realised in the Python ecosystem using the third-party library Pyodide. To illustrate the power and versatility of Pyodide, I provided several examples of its use, including:- A basic “Hello, World!” example. Calling Python functions from JavaScript. Utilising NumPy for numerical operations. Generating visualisations with Matplotlib. Running computationally heavy Python code in a Web Worker. A data dashboard I hope that after reading this article, you will, like me, realise just how powerful a combination of Python, Pyodide, and a web browser can be. The post Running Python Programs in Your Browser appeared first on Towards Data Science.