The Invent with Python Blog

Writings from the author of Automate the Boring Stuff.

Mon 31 October 2022

Installing Brython to Get Python in Your Browser

Posted by Al Sweigart in python   

JavaScript is not the only programming language you can run in the browser. Brython is a Python interpreter implemented in JavaScript so you can run Python code in your browser. This lets you have a Python interactive shell without having to install Python. You can also write Python code to interact with the DOM and create browser apps just like you could with JavaScript. The primary downside is that a browser must download about 6 megabytes of JavaScript files before it can run, which can be a significant delay. This blog post guides you through setting up Brython.

To "install" Brython, download the zip file from the Brython release page on GitHub: https://github.com/brython-dev/brython/releases/. (As of October 2022, this is Brython-3.11.0.zip)

Inside this zip file is brython.js and brython_stdlib.js. To get an interactive shell in a webpage, create a .html file with a text editor and copy/paste the following code:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="brython.js"></script>
    <script type="text/javascript" src="brython_stdlib.js"></script>
    <style>
    .codearea {
        background-color:#000;
        color:#fff;
        font-family:'Oxygen Mono', Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace;
        font-size:14px;
        overflow:auto
    }
    </style>
</head>

<body onload=brython({"debug":1}) ><!-- remove the 1 to leave debug mode -->
    <noscript>Please enable Javascript to view this page correctly</noscript>

    <textarea id="code" class="codearea" rows="20" cols="100"></textarea>

    <script type="text/python3">
        from interpreter import Interpreter

        # Start an interactive interpreter in textarea with id "code"
        Interpreter("code")
    </script>
</body>
</html>

Open this .html in your browser to view the interactive shell:

The Brython zip file you downloaded also has a demo.html file that showcases many examples of Python code that can interact with the Document Object Model (DOM). Instead of putting JS code inside of a <script type="text/python"> tag, you put Python code inside of a <script type="text/python"> tag.

You can also install Brython as a module to your Python installation using pip. Run pip install brython. This installs a brython-cli script. When you run brython-cli install, the script creates the following files in the current directory:

  • README.txt
  • brython.js
  • brython_stdlib.js
  • demo.html
  • index.html
  • unicode.txt

If you run python -m http.server to run a web server on your computer, then open your browser to the address http://localhost:8000 you will see the contents of index.html rendered in the browser. Right-click the web page and select View Source (or open index.html in a text editor) to view the Python code being run by Brython:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<script type="text/javascript" src="brython.js"></script>
<script type="text/javascript" src="brython_stdlib.js"></script>
</head>

<body onload="brython(1)">
<script type="text/python">
from browser import document

document <= "Hello"
</script>
</body>

</html>

To create client-side web apps that run in the browser, you'll have to learn Brython's API for interacting with the DOM. This is explained in detail in the Brython documentation.

You can also check out this PyCon 2014 talk by Susan Tan, Python in the Browser: Intro to Brython

Learn to program for free with my books for beginners:

Sign up for my "Automate the Boring Stuff with Python" online course with this discount link.