Run Python Code in the Browser with VS Code: A Step-by-Step Guide

3 min readNov 1, 2024

Running Python code in the browser directly from Visual Studio Code (VS Code) is a convenient setup for developers who want an integrated workflow for development and testing. This guide will walk you through setting up your VS Code to run Python code on a browser.

Step 1: Install VS Code and Set Up Python

Download and Install VS Code: If you haven’t installed Visual Studio Code, download it from VS Code’s official website and complete the installation.
Install Python: If Python is not installed on your machine, download and install it from Python’s official website.
Add Python to Path: During installation, check the box that says “Add Python to PATH.” This will make Python accessible from the terminal.

Step 2: Install Python Extensions in VS Code

To run Python code in VS Code efficiently, you’ll need to install the Python extension:

Open VS Code.
Go to Extensions: Click on the Extensions icon on the left sidebar.
Search for “Python”: Install the official Python extension provided by Microsoft. This will enable syntax highlighting, code completion, and more.

Step 3: Set Up Live Server to Run Code in the Browser

The Live Server extension in VS Code allows you to run HTML files in the browser, making it easier to view results when embedding Python with PyScript or Brython.

Install Live Server:

In VS Code, go to Extensions and search for “Live Server.”
Install the extension, which will allow you to open your HTML files directly in a browser.

2. Configure Your Project:

Create a new folder for your project and open it in VS Code.
Inside your project folder, create an index.html file where you'll embed your Python code.

Step 4: Running Python Code in Browser Using PyScript

PyScript is a popular way to run Python code in a browser with HTML. Here’s how to set it up:

Add PyScript to Your HTML File:

Open index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python in Browser</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <h1>Hello, Python in Browser!</h1>
    <py-script>
        print("Hello from PyScript!")
    </py-script>
</body>
</html>

Run the HTML with Live Server:

Right-click index.html and select "Open with Live Server." Your browser will open a new tab displaying the HTML page with Python running inside.

Check Output: Any output from the py-script will appear directly on the webpage or in the browser console.

Step 5: Running Python Code in Browser Using Brython

Brython offers an alternative way to run Python in the browser and is ideal for interactive applications.

Add Brython Library:

Open index.html and modify it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python with Brython</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.5/brython.min.js"></script>
</head>
<body onload="brython()">
    <h1>Hello from Brython!</h1>
    <script type="text/python">
        print("Hello from Brython!")
    </script>
</body>
</html>

Run Using Live Server:

Open the modified index.html file with Live Server as before.
The browser will display the output either on the page or in the console, running the Python code embedded with Brython.

Summary

With VS Code, running Python code in the browser becomes seamless. Using Live Server and tools like PyScript or Brython, you can write, test, and view Python code directly on a webpage. This workflow simplifies development, especially for beginners and those looking to create interactive web applications. Try it out, and enjoy coding Python right in your browser!