page-header-img

Run Python in Your Browser with PyScript: A Beginner’s Guide

May 22, 2025 JNNC Technologies
0 Comment
Courses

Run Python in Your Browser with PyScript: A Beginner’s Guide

Run Python in Your Browser

Run Python in Your Browser

If you’re looking to run Python code right in your browser, PyScript is a game-changer! It allows you to write Python directly within HTML, making it easy to experiment with Python without any server-side setup. Perfect for beginners and anyone who wants to try out Python code without installing anything.

Here’s a beginner’s guide to get you started with PyScript. JNNC Technologies 

1. What is PyScript?

PyScript is a framework that lets you run Python code in the browser using WebAssembly. With PyScript, you can directly embed Python code inside HTML and make your web page interactive with Python scripts, all without needing a back-end server.

2. Setting Up PyScript

To start using PyScript, you need to include PyScript’s files in your HTML page. You don’t need to install anything. Just follow these steps:

  1. Create a new HTML file or open an existing one.

  2. Add PyScript’s JavaScript and CSS files in the head section of your HTML:

html
<head>
<!-- Include PyScript CSS -->
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /><!– Include PyScript JS –>
<script defer src=“https://pyscript.net/latest/pyscript.js”></script>
</head>

3. Writing Python in HTML

With PyScript, you can add Python code directly in HTML using the <py-script> tag. Here’s a simple example:

html
<body>
<h1>Welcome to PyScript!</h1>
<py-script>
print("Hello, PyScript!")
</py-script>
</body>

This code will print Hello, PyScript! to the browser console when the page loads.

4. Running Python Code

To run Python code in PyScript, simply wrap your code inside the <py-script> tag. For example, let’s calculate the square of a number:

html
<py-script>
num = 4
print(f"The square of {num} is {num**2}")
</py-script>

This will output the result directly in the browser’s console, showing “The square of 4 is 16”.

5. Interactivity with HTML Elements

You can also interact with HTML elements. For instance, you can grab values from an HTML input and use Python to process them.

html
<body>
<input id="number" type="number" value="5" />
<button id="calculate">Calculate Square</button>
<p id="output"></p><py-script>
from pyscript import Elementdef calculate_square():
num = int(Element(“number”).element.value)
result = num ** 2
Element(“output”).element.textContent = f”Square of {num}: {result}”

Element(“calculate”).element.onclick = calculate_square
</py-script>
</body>

Here, when you click the “Calculate Square” button, it will compute the square of the number in the input box and display the result in the <p> tag with the ID output.

6. Using Libraries

PyScript also allows you to use Python libraries like NumPy, Pandas, and Matplotlib! You can load libraries from the PyScript environment using: Run Python in Your Browser

html
<py-script>
import numpy as np
arr = np.array([1, 2, 3])
print(arr)
</py-script>

This will let you use all the powerful features of Python’s scientific stack directly in the browser.

Run Python in Your Browser

7. Limitations to Be Aware Of

  • PyScript relies on WebAssembly, so performance can be slower compared to native Python.

  • Certain libraries or tools (like file I/O) might not be fully supported yet.

  • The overall ecosystem is still evolving, so expect occasional bugs or limitations with complex libraries or features.

8. Conclusion

PyScript is a fantastic way to combine Python and the web, especially if you’re a beginner wanting to quickly test ideas or make interactive Python applications without setting up a server. Whether you’re creating small demos or learning how web development works with Python, PyScript makes it easy to get started.

So, ready to add some Python magic to your browser? Go ahead and experiment with PyScript!

Sure, let’s dive deeper into some more advanced features and ways you can take advantage of PyScript for building interactive Python applications in the browser. There’s a lot of potential here, and it’s cool to see what you can create with it.

9. Working with Python Data Structures

PyScript makes it easy to work with common Python data structures like lists, dictionaries, and sets. You can perform operations on them directly in the browser.

For example, let’s work with a list and perform some operations:

html
<body>
<py-script>
# Creating a list
numbers = [1, 2, 3, 4, 5]# Adding elements to the list
numbers.append(6)# Iterating over the list
for num in numbers:
print(f”Number: {num}”)

# Summing the numbers
total = sum(numbers)
print(f”Total Sum: {total}”)
</py-script>
</body>

This script will display all the numbers in the list and also print the sum of the numbers (21 in this case).

10. Handling User Inputs with Forms

You can make interactive forms where the user inputs values, and Python handles the logic behind the scenes. For example, let’s say you want to create a simple form to calculate the factorial of a number.

html
<body>
<input id="num" type="number" placeholder="Enter a number" />
<button id="factorial">Calculate Factorial</button>
<p id="result"></p><py-script>
from math import factorial
from pyscript import Elementdef calculate_factorial():
num = int(Element(“num”).element.value)
result = factorial(num)
Element(“result”).element.textContent = f”Factorial of {num} is: {result}”

Element(“factorial”).element.onclick = calculate_factorial
</py-script>
</body>

This will create a simple user interface where the user can input a number, click the button, and then get the factorial of the number displayed on the page.

11. Importing External Python Libraries

PyScript supports importing many Python libraries out of the box, and you can also import your custom Python modules if you want.

Let’s say you want to work with NumPy (for example) to perform matrix multiplication:

html
<body>
<py-script>
import numpy as np# Creating two 2×2 matrices
matrix_a = np.array([[1, 2], [3, 4]])
matrix_b = np.array([[5, 6], [7, 8]])# Matrix multiplication
result = np.matmul(matrix_a, matrix_b)
print(f”Matrix Multiplication Result:\n{result}”)
</py-script>
</body>

This script will compute the matrix multiplication of two 2×2 matrices and print the result directly to the browser’s console.

12. Visualizing Data with Matplotlib

PyScript also allows you to use Matplotlib to visualize data. Let’s create a simple line plot:

html
<body>
<py-script>
import matplotlib.pyplot as plt# Sample data
x = [1, 2, 3, 4, 5]
y = [2, 4, 6, 8, 10]# Create a plot
plt.plot(x, y)
plt.title(“Simple Line Plot”)
plt.xlabel(“X Axis”)
plt.ylabel(“Y Axis”)

# Show plot in the browser
plt.show()
</py-script>
</body>

This will display a simple line plot in your browser. You can tweak the data, style, and other plot settings just as you would in a typical Python environment.

13. Interacting with the DOM

PyScript can also be used to interact with the DOM (Document Object Model) directly, which means you can dynamically change the page’s HTML elements from Python.

Here’s an example of how you can modify an HTML element’s content:

html
<body>
<div id="message">Click the button to change this message</div>
<button id="change-message">Change Message</button><py-script>
from pyscript import Elementdef change_message():
Element(“message”).element.textContent = “The message has been changed!”

Element(“change-message”).element.onclick = change_message
</py-script>
</body>

Clicking the button will change the text inside the <div id="message"> element.

Run Python in Your Browser

14. Using PyScript with HTML5 Canvas for Graphics

You can also use PyScript to draw on an HTML5 canvas using Python. This is ideal for creating interactive graphics or even games.

For example, let’s draw a circle on the canvas:

html
<body>
<canvas id="myCanvas" width="500" height="500"></canvas><py-script>
from pyscript import Element
import jscanvas = Element(“myCanvas”).element
ctx = canvas.getContext(“2d”)

# Draw a circle
ctx.beginPath()
ctx.arc(250, 250, 100, 0, 2 * js.Math.PI)
ctx.fillStyle = “blue”
ctx.fill()
</py-script>
</body>

This will create a blue circle in the center of the canvas. You can experiment with different shapes, colors, and effects, just like you would with JavaScript!

15. Accessing the Browser’s Web APIs

Because PyScript is running in the browser, it can access various web APIs like localStorage, geolocation, fetch (for making API requests), etc.

Here’s how you can use the Geolocation API in PyScript:

html
<body>
<button id="get-location">Get Location</button>
<p id="location"></p><py-script>
from pyscript import Element
import jsdef show_location():
def success(position):
lat = position.coords.latitude
lon = position.coords.longitude
Element(“location”).element.textContent = f”Latitude: {lat}, Longitude: {lon}”

def error():
Element(“location”).element.textContent = “Unable to retrieve location.”

js.navigator.geolocation.getCurrentPosition(success, error)

Element(“get-location”).element.onclick = show_location
</py-script>
</body>

This script will get the user’s current geolocation (latitude and longitude) and display it when the button is clicked.

16. Debugging PyScript

Debugging in PyScript can be tricky because you’re running code in the browser, and sometimes errors may not show up the way they do in a traditional Python environment. However, you can still use browser developer tools (F12) to check the console for errors and see the output from the print() statements or exceptions.

Final Thoughts

PyScript is an incredibly exciting way to run Python directly in the browser, and it opens up so many possibilities. From simple calculations to data visualizations, web interactions, and game development, there’s a ton you can do without needing a back-end server or complex setup.

Since PyScript is still evolving, keep an eye on updates, as new features and improvements are constantly being added to the framework.

Courses
Courses

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!