How to run python code in your browser
Web App development is a domain where newer tools and technologies emerge rapidly. Nowadays, companies are interested in creating web applications in order to attract customers through interactive web applications rather than shows some HTML pages over the internet to stand out. Javascript is the queen of web programming languages which comprises almost the entire web development tools and frameworks. We can develop a web application in just a fraction of seconds using Angular, React or the native javascript. Python is so popular with its library support that most companies prefer it as their best choice for AI and data science projects. As the demand increases, new changes are aligned to develop the application in a rapid manner where the amalgamation of different technologies plays a vital role. By combining python and HTML, we can render the python codes on HTML pages. Brython is an implementation of Python 3 which can be used to run python codes in your browser. Last week, Anaconda’s CEO Peter Wang announced a revolutionary technology called PyScript which allows users to run python code in their browser. In this article, we will try to cover the implementations of python in HTML pages.
Getting Started
1. Brython
Python frameworks such as Flask and Django is used to render on the server side whereas Brython is serve python code on the client-side. Brython is a framework which can be used to inject python code over HTML pages. Its primary objective is to replace Javascript as the scripting language for the web. Brython is capable of interacting with DOM thus making it a promising framework on the scripting side. This ability of Brython can be used to create something new in the browser.
Installation
- Write Python code inside the tag.
<body onload="brython()"> <script type="text/python"> # your python code </script> </body>First program
Let’s try our first Brython framework program which runs on the client-side.
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/brython@3.10.5/brython.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/brython@3.10.5/brython_stdlib.js"></script> </head> <body onload="brython()"> <h2 ></h2> <script type="text/python"> from browser import document document <= "Hello World" document['msg'].text = "Hello World" print("Hello World") </script> </body> </html>Brython provides an online console to write and execute the python codes.
You can include the python console on your website using,
<iframe src="http://brython.info/console.html" width="800" height="400"></iframe>Brython can interact with DOM elements and Javascript libraries such as Highcharts, jQuery, Socket.io, Three.js, etc. It is easy to fetch data from the server using an ajax call from the brython library.
If you are interested in trying out brython, checkout the following repositories.
- brython-dev/brython
- codemaker2015/brython-demo
2. PyScript
During PyCon US 2022, Anaconda’s CEO Peter Wang unveiled a revolutionary framework — PyScript. Which enables users to write python codes in the browser.
PyScript is a JavaScript framework which allows users to embed python codes inside the HTML page like PHP. It enables the users to use the power of python libraries such as numpy, pandas and scikit-learn on web apps. It also enables users to carry out statistical and AI computations inside the web app rather than processing the data on a server and sending the response back to the client.
PyScript is built on Pyodide. CPython is a port of Pyodide which is based on WebAssembly. WebAssembly converts human-readable .wat text format language to a binary .wasm format that browsers can run on.
Image credits: anaconda.cloud/pyscript
Installation
PyScript provides CDN links which can be used to integrate with the web application.
- Add the following code in the HTML file to add the PyScript dependency.
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script>- Add PyScript components such as and to the html page to write python code snippets inside the browser.
<py-script>: wraps python code that is executable within the web page.<py-repl>: renders the code editor and allows the user to write code in it.
<py-script> # your python code </py-script>First program
Let’s try our first PyScript framework program which runs on the client-side.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <style> #msg < font-size: x-large; ></style> </head> <body> <h1 > <py-script> print('Hello World') </py-script> </h1> </body> </html>You can include the python console on your website using,
<py-repl> print('Hello World') </py-repl>For example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> <py-repl> print('Hello World') </py-repl> </body> </html>If you are interested in trying out pyscript, checkout the following repositories.
- pyscript/pyscriptjs/examples
Thanks for reading this article.
If you enjoyed this article, please click on the heart button ♥ and share to help others find it!
The full source is available on https://github.com/codemaker2015/python-on-browser-examples
Here are some useful links,
- brython-dev/brython
- Anaconda Nucleus
- Pyodide
- pyodide/packages
Originally posted on Medium —
How to run python code in your browser
Top comments (3)
I’m a programmer born on October 30th, 2006. I love programming, it has, and always will be my passion.
Ðis is a great article on PyScript!
I won’t be able to use it, but I þink ðis is a really great article.
2 likes Like Comment button
Seasoned professional, forward looking software engineer with 4+ years of experience in creating and executing innovative solutions in immersive field to enhance business productivity.
Say Hello to PyScript
PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface and the power of Pyodide, WASM, and modern web technologies. The PyScript framework provides users at every experience level with access to an expressive, easy-to-learn programming language with countless applications.
What is PyScript? Well, here are some of the core components:
- Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration
- Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
- Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
- Environment management: Allow users to define what packages and files to include for the page code to run
- Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
- Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python
All that to say… PyScript is just HTML, only a bit (okay, maybe a lot) more powerful, thanks to the rich and accessible ecosystem of Python libraries.
In short, our mission is to bring programming for the 99%.