How to run python code in your browser

#python #pyscript #brython

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.

The big moves in web development — Brython and PyScript.

Getting Started

Let’s start with Brython.

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

Brython provides CDN links which can be used to integrate with the web application.

Add the following code in the HTML file to add the Brython dependency.

  <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>

Bind the function brython() on HTML page load.

  <body onload=brython()>

Write Python code inside the tag. </li> </ul> <div class="highlight"><pre class="highlight plaintext"><code> <body onload="brython()"> <script type="text/python"> # your python code </script> </body> </code></pre></div> <p></p> <h3> <a name="first-program" href="#first-program" class="anchor"> </a> First program </h3> <p>Let’s try our first Brython framework program which runs on the client-side.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> <!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 id="msg"></h2> <script type="text/python"> from browser import document document <= "Hello World" document['msg'].text = "Hello World" print("Hello World") </script> </body> </html> </code></pre></div> <p></p> <p>Brython provides an online console to write and execute the python codes.</p> <p>You can include the python console on your website using,<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> <iframe src="http://brython.info/console.html" width="800" height="400"></iframe> </code></pre></div> <p></p> <p>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.</p> <p>If you are interested in trying out brython, checkout the following repositories.</p> <ul> <li><a href="https://github.com/brython-dev/brython/tree/master/www">brython-dev/brython</a></li> <li><a href="https://github.com/codemaker2015/brython-demo">codemaker2015/brython-demo</a></li> </ul> <h2> <a name="2-pyscript" href="#2-pyscript" class="anchor"> </a> 2. <a href="https://github.com/pyscript/pyscript">PyScript</a> </h2> <p>During PyCon US 2022, Anaconda’s CEO Peter Wang unveiled a revolutionary framework — PyScript. Which enables users to write python codes in the browser.</p> <p>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.</p> <p>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.</p> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0608c30gemgv14b0mk3u.png" alt="pyscript"><br> Image credits: anaconda.cloud/pyscript</p> <h3> <a name="installation" href="#installation" class="anchor"> </a> Installation </h3> <p>PyScript provides CDN links which can be used to integrate with the web application.</p> <ul> <li>Add the following code in the HTML file to add the PyScript dependency. </li> </ul> <div class="highlight"><pre class="highlight plaintext"><code><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </code></pre></div> <p></p> <ul> <li>Add PyScript components such as <py-script> and <py-repl> to the html page to write python code snippets inside the browser.</li> <li><code><py-script></code>: wraps python code that is executable within the web page.</li> <li><code><py-repl></code>: renders the code editor and allows the user to write code in it. </li> </ul> <div class="highlight"><pre class="highlight plaintext"><code><py-script> # your python code </py-script> </code></pre></div> <p></p> <h3> <a name="first-program" href="#first-program" class="anchor"> </a> First program </h3> <p>Let’s try our first PyScript framework program which runs on the client-side.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><!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 id="msg"> <py-script> print('Hello World') </py-script> </h1> </body> </html> </code></pre></div> <p></p> <p>You can include the python console on your website using,<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><py-repl> print('Hello World') </py-repl> </code></pre></div> <p></p> <p>For example:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><!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> </code></pre></div> <p></p> <p>If you are interested in trying out pyscript, checkout the following repositories.</p> <ul> <li><a href="https://github.com/pyscript/pyscript/tree/main/pyscriptjs/examples">pyscript/pyscriptjs/examples</a></li> </ul> <p>Thanks for reading this article.</p> <p>If you enjoyed this article, please click on the heart button ♥ and share to help others find it!</p> <p>The full source is available on <a href="https://github.com/codemaker2015/python-on-browser-examples">https://github.com/codemaker2015/python-on-browser-examples</a></p> <p>Here are some useful links,</p> <ul> <li><a href="https://github.com/brython-dev/brython">brython-dev/brython</a></li> <li><a href="https://anaconda.cloud/pyscript-python-in-the-browser">Anaconda Nucleus</a></li> <li><a href="https://pyodide.org/en/stable/">Pyodide</a></li> <li><a href="https://github.com/pyodide/pyodide/tree/main/packages">pyodide/packages</a> </li> </ul> <p>Originally posted on Medium -<br> <a href="https://medium.com/@codemaker2016/how-to-run-python-code-in-your-browser-69b4044b803a">How to run python code in your browser</a></p>