How to use Brython in the Browser

1. What is Brython?

Brython is a JavaScript-written Python interpreter optimized to run in web browsers. You can develop with Brython instead of JavaScript:

Replace front-end code with Python.
Using Python for manipulation of DOMs, handling of events, and communication with web APIs.
Include Python code inside the HTML.

2. Installing Brython

Method 1: Using a CDN (Quick Setup)

1. Add the Brython script to your HTML file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython.min.js"></script>

2. Add a script to initialize Brython:

<script>
    window.onload = function() {
        brython(); // Initialize Brython
    }
</script>

Method 2: Download Brython

Download the Brython files from the official site or repository:
- Brython GitHub Repository
Include the downloaded brython.min.js file in your project.

3. Writing and Running Python Code

Example HTML with Python:

Here’s how to embed and run Python code in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brython Example</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython.min.js"></script>
</head>
<body onload="brython()">
    <h1>Welcome to Brython</h1>
    
    <!-- Python script -->
    <script type="text/python">
        from browser import document

        # Select the H1 element and modify its content
        document["title"].innerHTML = "Hello from Python!"
    </script>

    <!-- Assign an ID to the element you want to manipulate -->
    <h1 id="title">This will be updated by Python</h1>
</body>
</html>

The type="text/python" attribute tells the browser that this is Python code.
The Python document object is used to manipulate the DOM (like JavaScript’s document).

4. Using Brython to Interact with the DOM

Example: Adding Event Listeners

You can bind Python functions to DOM events.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brython Button Example</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython.min.js"></script>
</head>
<body onload="brython()">
    <h1>Click the button below:</h1>
    <button id="my-button">Click Me!</button>
    <p id="output"></p>

    <script type="text/python">
        from browser import document

        # Define a function to handle the button click
        def on_button_click(event):
            document["output"].text = "Button clicked!"

        # Bind the function to the button's click event
        document["my-button"].bind("click", on_button_click)
    </script>
</body>
</html>

5. Including External Python Libraries

Brython has support for most Python libraries. To include external libraries:

Use Brython’s built-in support for some Python libraries.
Include the brython_stdlib.js file in your project to have full support for the standard library.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython_stdlib.min.js"></script>

6. Debugging and Testing Brython Code

Debugging Tips:

Look at error messages or log output in browser console.
print() function of Python prints output to browser console.

Example:

print("Hello from Brython!")

7. Example: A Complete Web App

Below is an example of a small app that takes user input and displays a message:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brython App</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython.min.js"></script>
</head>
<body onload="brython()">
    <h1>Enter Your Name:</h1>
    <input type="text" id="name-input" placeholder="Your Name">
    <button id="submit-button">Submit</button>
    <p id="greeting"></p>

    <script type="text/python">
        from browser import document

        # Define the function to handle the button click
        def greet_user(event):
            name = document["name-input"].value
            if name:
                document["greeting"].text = f"Hello, {name}!"
            else:
                document["greeting"].text = "Please enter your name."

        # Bind the function to the button's click event
        document["submit-button"].bind("click", greet_user)
    </script>
</body>
</html>

8. When to Use Brython

Brython excels at:

Python fans who prefer writing Python instead of JavaScript.
Prototyping and teaching Python in the browser fast.
Simplify DOM manipulations for Python developers.

For Employers

For Employees

For Employers

For Employees