Real Python: A First Look at PyScript: Python in the Web Browser

PyScript is a brand-new framework that caused a lot of excitement when Peter Wang, the CEO and co-founder of Anaconda, Inc., revealed it during his keynote speech at PyCon US 2022. Although this project is just an experiment in an early phase of development, people on social media seem to have already fallen in love with it. This tutorial will get you up to speed with PyScript, while the official documentation is still in the making.

In this tutorial, you’ll learn how to:

• Build interactive front-end apps using Python and JavaScript
• Run existing Python code in the web browser
• Reuse the same code on the back-end and the front-end
• Call Python functions from JavaScript and the other way around
• Distribute Python programs with zero dependencies

To get the most out of this tutorial, you should ideally have some experience with JavaScript and front-end programming in general. At the same time, you’ll be able to follow along just fine even if you’ve never done any web development before. After all, that’s the whole idea behind PyScript!

Disclaimer: PyScript Is an Experimental Project!

This tutorial is coming to you only a few weeks after the official announcement of PyScript. At the time of writing, you could find the following warning prominently displayed on the framework’s home page:

Please be advised that PyScript is very alpha and under heavy development. There are many known issues, from usability to loading times, and you should expect things to change often. We encourage people to play and explore with PyScript, but at this time we do not recommend using it for production. (Source)

This can’t be stressed enough. Before you get started, be prepared for things not to work as presented in this tutorial. Some things may not work at all by the time you read this, while some problems might have already been addressed in one way or another.

That’s not surprising, given PyScript’s relatively short history. Because it’s open-source software, you can take a peek at its Git commit history on GitHub. When you do, you’ll find that Fabio Pliger from Anaconda, who’s the creator and technical lead of PyScript, made the initial commit on February 21, 2022. That’s just over two months before it was publicly announced to the world on April 30!

That’s where things stand with PyScript. If you’re ready to take the risk and would like to give this framework a try, then keep reading.

Getting Started With PyScript

By the end of this section, you’ll have a bird’s-eye view of the framework and its building blocks, including how they work together to bring Python into your browser. You’ll know how to cherry-pick the needed files and host PyScript locally without depending on an Internet connection.

Wrap Your Head Around PyScript

You might be asking yourself what exactly PyScript is. The name is probably a clever attempt at marketing it as a replacement for JavaScript in the browser, but such an interpretation wouldn’t give you the complete picture. Here’s how PyScript is currently being advertised on its Twitter profile:

PyScript - programming for the 99% (Source)

One of the goals of PyScript is to make the Web a friendly place for anyone wanting to learn to code, including kids. The framework achieves that goal by not requiring any installation or configuration process beyond your existing text editor and a browser. A side effect is that PyScript simplifies sharing your work with others.

When you look at PyScript’s README file, you’ll find the following summary and a longer description:

PyScript is a Pythonic alternative to Scratch, JSFiddle, and other “easy to use” programming frameworks, with the goal of making the web a friendly, hackable place where anyone can author interesting and interactive applications.

(…)

PyScript is a meta project that aims to combine multiple open technologies into a framework that allows users to create sophisticated browser applications with Python. It integrates seamlessly with the way the DOM works in the browser and allows users to add Python logic in a way that feels natural both to web and Python developers (Source)

Scratch is a relatively straightforward visual programming language that children learn at school to build simple games and funny animations. JSFiddle is JavaScript’s online editor commonly used to demonstrate a given problem’s solution on forums like StackOverflow.

Furthermore, PyScript’s home page contains this tagline:

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. (Source)

In other words, PyScript allows you to use Python, with or without JavaScript, to build interactive websites that don’t necessarily have to communicate with a server. The main benefit here is that you can leverage your existing knowledge of Python to enter the world of front-end development, lowering the entry barrier and making it more accessible. But there are many other benefits of using PyScript that you’ll learn about later.

On a slightly more technical level, PyScript is a single-page application (SPA) written in TypeScript using the Svelte framework, styled with Tailwind CSS, and bundled with rollup.js. According to one of the comments in an early Git commit, the project was based on a template mentioned in a blog post by Sascha Aeppli, which combines those tools.

PyScript wouldn’t be possible without building on top of a recent version of Pyodide—a CPython interpreter compiled with emscripten to WebAssembly, enabling Python to run in the browser. PyScript provides a thin abstraction layer over Pyodide by encapsulating the required boilerplate code, which you’d otherwise have to type yourself using JavaScript.