PyScript - The Complete Guide (2023 Edition)

Explore how PyScript enables running Python in web pages to manipulate the document object model, respond to html events, and build dynamic pages alongside JavaScript.

Install Python from the official site, verify with the command line, set up Visual Studio Code with the Python extension, and enable Live Server to run PyScript pages.

Explore the script source code project in visual code, open main.ts, and see how postscript tags are defined; click Pie Box to view its TypeScript attributes.

Explore two ways to use pyscript: inline python code within an html page using the py-script tag, and external python code via the src attribute, enabling results display.

Display the result in the html div with id welcome using a py script tag, coloring it red and passing the message as script arguments.

PyScript runs Python in the browser by executing code in script tags and loading libraries like numpy and pandas, with Python code transformed through web assembly for in-browser execution.

Learn to read HTML elements in PyScript via two approaches: construct by element ID or access through the document library by ID, name, or class, noting live vs static collections.

Learn to set HTML elements with PyScript, including id and class, and retrieve elements via document; use set attribute, inner text, and style, and attach event callbacks.

Explore how PyInputBox, PyButton, and PyTitle create customized input fields and buttons, handle click events, and trigger Python callbacks.

Explore pyconfig, a tag that declares global project configuration, sets Python as the default language, and examine how the Postscript project uses loaders with retrievable config in its source.

This lecture introduces pineapple, a customized postscript that lets a web user type Python code and display the result on a page, using two attributes for result and error display.

Explore how events are handled in PyScript, mapping user actions—mouse enter, mouse click, and key presses—to callbacks via static attributes or dynamic addEventListener using Python.

Program events in PyScript by handling mouse enter on a div to trigger a function that displays a message in a gray div, using attributes and an event listener.

Register books by opening a modal form from the new book button, entering details, and sending a Python-driven post request that converts inputs to JSON and displays results.

Design a download feature that triggers csv download on button click, building a csv with a header from dictionaries via a backend fetch.

Learn to create and use custom attributes on elements in PyScript, add attributes to tags, and retrieve their values via a dictionary to display in the browser console.