Python

Python at HTML

March 14, 2023

 Python has grown in popularity dramatically in recent years. It has a wide range of applications, including AI, data science, robotics, and scripting, to mention a few.

Python is mostly used in the backend in web development, with frameworks such as Django and Flask.

Python formerly lacked front-end capabilities in comparison to other languages such as JavaScript. However, Python programmers have created libraries (such as Brython) to let their favourite language run on the web.

This year, during the PyCon 2022 conference, Anaconda launched PyScript, a framework that allows you to utilise Python on the web using regular HTML.

PyScript is a Python front-end framework that lets users write Python applications in the web using an HTML interface.

It was created with the help of Emscripten, Pyodide, WASM, and other modern web technologies to provide the following capabilities:

  • To provide a simple and easy-to-use API.
  • To create a system of extendable and pluggable components.
  • To achieve the aim "Programming for the 99 percent," support and expand standard HTML to read opinionated and dependable bespoke components.

    Why PyScript?

    PyScript provides a programming language with consistent styling conventions, increased expressiveness, and simplicity of learning by including the following features:

    • Browser-based support: PyScript makes Python and hosting possible without the use of servers or settings.

    • Bi-directional communication between Python and JavaScript objects and namespaces is possible using PyScript.

    • PyScript supports a wide range of Python packages, including Pandas, NumPy, and many others.

    • Flexibility of the framework: PyScript is a flexible framework that allows developers to easily write extensible components in Python.

    • PyScript's environment management feature allows authors to specify which files and packages should be included in their page code for it to run.

    • UI Development: PyScript allows developers to quickly create UI components such as buttons and containers, among others.


    How to Get Started with PyScript

    To get started with PyScript, add the relevant pyscript files to your HTML page. Let's use PyScript to create a simple "Hello World" page.

    Let's create an index.html file and import the necessary PyScript files. These should go just before the closing </head> tag. 

    <head>
       <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
       <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
       <title>PyScript</title>
    </head>

Now that we've linked PyScript to the HTML file, we can print our "Hello World."

We can do this with the <py-script> tag. We can use the <py-script> tag to run multi-line Python scripts in the browser. The tag should be in the middle of the <body> tags.

<body>
   <py-script> print("Hello, World!") </py-script>
</body>

The PyScript framework allows you to perform a variety of actions. Let's take a look at a few of them right now.

Python output in HTML tags

When using PyScript, you may want to pass variables from your Python code to HTML. To accomplish this, use the write method from the pyscript module within the <py-script> element. The id attribute can be used to pass strings that are displayed as ordinary text.The write method takes two parameters: the id value and the variable to be supplied.

Here's a simple pyScript code that uses Python's datetime module to output today's date.

<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <b>
        <p>Today is <u><label id='today'></label></u></p>
    </b>
    <py-script>
        import datetime as dt
        pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
</body>
</html>

REPL in browser

PyScript provides a web-based interface for running Python code.

PyScript uses the <py-repl> tag to do this. The <py-repl> tag includes a REPL component, which works as a code editor and allows you to write executable code inline.


<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>