PyScript Demo / Tutorial | End-to-end PyScript Tutorial #1

We learn about PyScript, and how to use PyScript to build interactive plots / apps in the browser (using only Python)
00:00 what is pyscript
02:34 Html boilerplate (emmet)
07:40 inline python with py-script tag
09:14 py-script with src attribute (sourcing python into py-script)
11:23 VSCode's Live Server extension (+ alternatives to http server in node/python)
14:22 py-repl
15:34 py-env
17:55 rendering bokeh plot w/ pyscript
Watch part 2 (end to end deployment of a PyScript app on GitHub pages): • Deploying a PyScript A...
Watch Part 3 (building interactive PyScript dashboards): • Build a PyScript inter...
GtiHub Repo containing the example code we've written: github.com/onlyphantom/pyscri...

[@ArcanePhalanx]

Brilliant video, mate. Very concise and thorough. The 28 mins flew

[@SamuelChan]

Thanks Patrick!

[@a1f.]

Would love more videos regarding PyScript, subscribed and looking forward for more videos

[@SamuelChan]

Thanks Stefan! Also check out the rest of the PyScript playlist on my channel! We’ve got to build some pretty cool stuff in the browser! Part 1 (intro to PyScript): kzbin.info/www/bejne/h6CblYuvgL2sg6c Part 2 (PyScript deployment): kzbin.info/www/bejne/pXnCo4eKec-ArK8 Part 3 (PyScript + Altair data dashboard): kzbin.info/www/bejne/q5i2c5SFiZWljKs Part 4 (PyScript Guest Book app, CRUD): kzbin.info/www/bejne/fmfVf62Hmtesh9E

[@ElOmarlomar]

Thanks mate. Most informative content I have ever seen about pyscript.

[@SamuelChan]

Thank you! I have a full playlist of fun build-an-app with pyscript projects too - hope it’s helpful: PyScript Tutorial / Walkthroughs kzbin.info/aero/PLXsFtK46HZxXS9yBHkQXvaw1eLSIS5Mb-

[@ElOmarlomar]

@@SamuelChan Thanks!

[@mpty2022]

his brain is way faster than the language and typing... great tutorial

[@fredericquivron4878]

Great first video ! Thanks

[@SamuelChan]

You guys asked, and your techbro has duly delivered. Here's part 2: kzbin.info/www/bejne/pXnCo4eKec-ArK8. This takes a full PyScript and deploy it onto GitHub Pages (using GitHub Action) for free! We'll use a lot of the same knowledge here but get to see an end-to-end deployment too! Part 3 kzbin.info/www/bejne/q5i2c5SFiZWljKs will see us build a fully interactive analytics dashboard with Altair and PyScript. Part 4 kzbin.info/www/bejne/fmfVf62Hmtesh9E we'll build a CRUD (create read update delete) system in the form of a guest book using PyScript. This is something you'd do with Vue or React in the past, but now it's only a few lines of Python code. Part 5: Building an interactive map w/ Folium & PyScript kzbin.info/www/bejne/m6Lcf2uVmc52d7s Subscribe to the channel and leave other future ideas here!

[@amieexxcauntie2671]

Thank you very much.. Please add more more more project about pyscript.... From Indonesia🇮🇩

[@SamuelChan]

Thank you Renni! Check out the other projects we build with pyscript too 😀 Part 1 (intro to PyScript): kzbin.info/www/bejne/h6CblYuvgL2sg6c Part 2 (PyScript deployment): kzbin.info/www/bejne/pXnCo4eKec-ArK8 Part 3 (PyScript + Altair data dashboard): kzbin.info/www/bejne/q5i2c5SFiZWljKs Part 4 (PyScript Guest Book app, CRUD): kzbin.info/www/bejne/fmfVf62Hmtesh9E

[@touchtapkongkaew9985]

Thank you very much ☺

[@eliasrayan6421]

Thanks for the video. I'm quite surprised about the no-indent part : it should be quite easy for them to ignore the n-first tabulations on all the "script lines".

[@SamuelChan]

It’s certainly iffy at best. I changed my formatted to use two spaces and made a few more changes and it works, sometimes. But it became too much hassle (keystrokes etc) that I just don’t bother. Last few pyscript projects I try to put lost python code in a separate .py file and source it and love it better that way. Knowing it’s a one week old project I think it’s understandable.

[@lukeplayer602]

Amazing job and very insightful video. I have a question, how would you retrieve audience retention? Much appreciated!

[@SamuelChan]

Hey, what do you mean by 'audience retention'? I'm guessing you want to implement some sort of web analytics?

[@yphastos]

What OS are you using? I can't tell because I don't see the minimize maximize close buttons. Also, how do you keep the browser on top of the VSCode window? Nice video btw.

[@SamuelChan]

Thank you! I’m using Linux, and record my videos between Ubuntu and PopOS, this is on my Ubuntu machine. I then use OBS Studio to lay the browser window on top of the IDE Window. OBS is a free, open source software. Hope this helps! :)

[@tetsujikato]

Really nice video. Thank you so much. Wondering how to pass the URL arguement to pyscrypt like location.search function in js.

[@SamuelChan]

Thank you 😀 we did use the url query parameters in part 2 of the pyscript series bro: kzbin.info/www/bejne/pXnCo4eKec-ArK8.

[@user-xe4jc1un7v]

Good one

[@user-xe4jc1un7v]

it is quite informative

[@SamuelChan]

Thank you! I have a whole playlist on building amazing apps with PyScript so feel free to check that out! kzbin.info/aero/PLXsFtK46HZxXS9yBHkQXvaw1eLSIS5Mb-

[@pietraderdetective8953]

Hi Samuel, awesome video mate! I want to ask how is Pyscript in terms of performance? I'm a noob Python dev who decided to learn a little bit about JS around 2 months ago. Excellent channel, I'm subscribed!

[@SamuelChan]

Hey Pie Trader we’ve come a long since when pyscript was first released and performance wise it’s been much improved. If you watch some of my later videos in the my “build with pyscript” series you’ll see a noticeable difference! :) PyScript Tutorial / Walkthroughs kzbin.info/aero/PLXsFtK46HZxXS9yBHkQXvaw1eLSIS5Mb-

[@sanjayplays5010]

Hey Samuel, how does event handling work in pyscript? For example, I want to upload a file, parse it, and display it on the page. I'm unsure how event handling works in this situation, would you be able to make a tutorial on it? Awesome work on this one!

[@waseksamin3216]

It's in alpha mode. I guess you have to follow the documentation. I am not sure if they put an event handler yet. Better check the documentation

[@sanjayplays5010]

@@waseksamin3216 Have you found documentation for this? I've seen their Getting started guide in the official repo, but I can't find the full documentation.

[@SamuelChan]

The documentation is very barebones at this point (it’s been released only 4 days ago after all). I’m going to steal your idea (with your blessing) and make a video on it when I have time but I suspect it may involve some javascript too for the handling!

[@sanjayplays5010]

@@SamuelChan Of course, that would be awesome!

[@SamuelChan]

@@sanjayplays5010 Hey Sanjay and Wasek, I expanded on the idea even more. Here's part 2: kzbin.info/www/bejne/pXnCo4eKec-ArK8

[@majaniderrick9241]

You made me subscribe Am grateful

[@SamuelChan]

Thank you my bro! 🙏🏼❤️

[@majaniderrick9241]

@@SamuelChan kindly am new in Data Science do u have any particular video u show how to import a dataset to Pyscript and do some EDA?

[@SamuelChan]

Part 3 builds a data visualization dashboard with Altair. You can use it with your own data frame and add some EDA. You can also clone / fork the code from my repository to add EDA on the data within PyScript. If you still think a video walkthrough may help, I can think about creating one this week! :) Part 3 (PyScript + Altair data dashboard): kzbin.info/www/bejne/q5i2c5SFiZWljKs Part 4 (PyScript Guest Book app, CRUD): kzbin.info/www/bejne/fmfVf62Hmtesh9E

[@majaniderrick9241]

@@SamuelChan thanks i would appreciate u do another video i watched part 3 there are some aspects i did not get clear

[@SamuelChan]

Hey Majani bro I have Part 4 too: kzbin.info/www/bejne/fmfVf62Hmtesh9E this builds a guest book / contact book app using more more intermediate concepts of PyScript and closely resemble the CRUD pattern. If you have any questions, suggestions for what you’d like to see me do with pyscript, let me know! Would love to bring them into the series as well.

[@phlorah797]

Nice 👍 Does it take in .ipynb files?

[@SamuelChan]

Hey! That’s exactly what we’re exploring in Part 2 of the series: kzbin.info/www/bejne/pXnCo4eKec-ArK8

[@all_bets_on_Ganesh]

How does this integrate with nodejs? Ive been wanting to write my UI in python and have javascript run my business logic for quite some time now. So Happy to be part of such a forward thinking web dev community. Thanks pyscript, this doesnt seem ridiculous at all 🤣🤣🤣🤣🤣

[@SamuelChan]

“Write my UI in python and logic in javascript” sounds extremely progressive even by techbros standard

[@matthieud.1131]

Could this be used to write games in Python that run in the browser?

[@SamuelChan]

Yessir. You can. In fact somebody has teased on playing a game of mario using pyscript -- it leverages on a lot of js libraries though (including canvas) but 99% of the code you'll write in python. And it would run in the browser. I may cover that in a future video! Check out the rest of the playlist though there's plenty of cool apps we're building with PyScript (4 videos so far!).

[@donatellodonini3147]

Hi, how can i import an external file in pyscript? I need to run a lot of code and I don't want to put it all in the html... Is there a way to import the external file and then run it witout making a single 100.000 lines-of-code file

[@SamuelChan]

hey Donatello, I think 9:20 to 11:20 addresses what you need. You write it in normal python files (demo1.py, demo2.py) and then use if they're contained in a scripts directory.

[@itsguardiantime4928]

Great video, is there any way to install Pillow with pyscript?

[@SamuelChan]

Using pillow as a dependency will work, but the graphics rendering backend outside of matplotlib may not.

[@xinchianlim5016]

I tried to import enchant and gensim in pyscript, but i think it causes some error, do you have any idea how to import these 2 packages?

[@SamuelChan]

Yeah not all python packages work, there are actual constraints around what a browser can / can’t do. Examples are like the requests etc. or library that uses lower level OS-level system.

[@FlashyFacts12]

Hey Samuel, do you know if it supports Pygame? I want to implement my game to a website.

[@SamuelChan]

The contributors actually implemented a Mario (in the browser) game using pyscript, so I can see how your idea may work! github.com/pyscript/pyscript/tree/main/examples/mario When I have more time I’ll try to make a few tutorials on pyscript for game dev! 🫶

[@seanalvarado3638]

Could u make a series on flask and how to deploy it on a linux server with apache on it?

[@SamuelChan]

I’ll add it to the backlog!

[@johnrovasi4598]

how can we import libraries like requests for example

[@SamuelChan]

the mindblowing thing about it is that it works out of the box. Specify 'requests' (or any other libraries, even obscure ones as long as they're on PyPI) in py-env, then import them as usual in your script. It's ridiculous. I have a python package (github.com/onlyphantom/emailnetwork) with >100 installs per week, and ridiculously enough, I can also just import it. And it still works.

[@jovitabuinickaite5927]

how to upload python code with web scraping and matplot graphs. I get an error in ModuleNotFoundError: No module named 'requests'

[@SamuelChan]

Yes you cannot use `requests` as that isn't something your browser has access to (along with other OS-level functionality, like trying to print the dir of your OS). Instead, use PyFetch in place of requests. This is how you do it: kzbin.info/www/bejne/aYDWd4mMh6erb8U I've built 8 different PyScripts apps in this playlist and many of them have some variations of fetching data, which you may find helpful: kzbin.info/aero/PLXsFtK46HZxXS9yBHkQXvaw1eLSIS5Mb-

[@MegaLolStorm]

I could tell you use custom keyboard the moment you started typing. What’s your build? It’s so creamy!

[@SamuelChan]

I use the Keychron Q1 mechanical keyboard - it quite programmable and you can assemble it from scratch to fit your style. It’s a decent keyboard :)

[@abdullahsaid4765]

this means bye bye js or what ? or this is means that we have best feature use python and js power in same time and made amazing work with them.🙂

[@SamuelChan]

I can see it being used with or without js bro. I mean, in this video we only sourced pyscript.js and we didn’t have to write any js and look at what we can achieve just with python so that’s interesting for sure

[@SamuelChan]

@Yassin Zao I’m not making a comparison to front end frameworks though. Also, Jupyter on its first month is significantly different from its ecosystem today. Pyscript is 1 week old. Being able to import python code and write full dashboards with just python is interesting and I’ve never made claims beyond that. Maybe other KZbin channels have extremely sensational headlines and it rubs you the wrong way and I can empathise with that. If you mean to say that the tutorial didn’t showcase its full potential, that’s because I break it down into other parts. For example Part 3 I went into building it with Altair and deploy it live. Something far easier done here than through Jupyter or any other python tooling / stack. kzbin.info/www/bejne/q5i2c5SFiZWljKs

[@ryanboguslavsky5215]

Hello, does this method still work? I copied your code from GitHub and when I open the HTML file in browser it says "Loading runtime... Runtime created... Initializing components..." and then never stops loading. I checked the console and it gives me many errors that I don't understand. I've replied to this comment with the errors if you're interested.

[@ryanboguslavsky5215]

Uncaught (in promise) PythonError: Traceback (most recent call last): File "/lib/python3.10/asyncio/futures.py", line 201, in result raise self._exception File "/lib/python3.10/asyncio/tasks.py", line 234, in __step result = coro.throw(exc) File "/lib/python3.10/site-packages/micropip/_micropip.py", line 183, in install transaction = await self.gather_requirements(requirements, ctx, keep_going) File "/lib/python3.10/site-packages/micropip/_micropip.py", line 173, in gather_requirements await gather(*requirement_promises) File "/lib/python3.10/asyncio/futures.py", line 284, in __await__ yield self # This tells Task to wait for completion. File "/lib/python3.10/asyncio/tasks.py", line 304, in __wakeup future.result() File "/lib/python3.10/asyncio/futures.py", line 201, in result raise self._exception File "/lib/python3.10/asyncio/tasks.py", line 232, in __step result = coro.send(None) File "/lib/python3.10/site-packages/micropip/_micropip.py", line 291, in add_requirement await self.add_wheel( File "/lib/python3.10/site-packages/micropip/_micropip.py", line 316, in add_wheel await self.add_requirement(recurs_req, ctx, transaction) File "/lib/python3.10/site-packages/micropip/_micropip.py", line 291, in add_requirement await self.add_wheel( File "/lib/python3.10/site-packages/micropip/_micropip.py", line 316, in add_wheel await self.add_requirement(recurs_req, ctx, transaction) File "/lib/python3.10/site-packages/micropip/_micropip.py", line 286, in add_requirement raise ValueError( ValueError: Couldn't find a pure Python 3 wheel for 'tornado>=5.1'. You can use `micropip.install(..., keep_going=True)` to get a list of all packages with missing wheels. at new_error (pyodide.asm.js:14:238191) at pyodide.asm.wasm:0xedbcb at pyodide.asm.wasm:0xf1a0e at method_call_trampoline (pyodide.asm.js:14:238105) at pyodide.asm.wasm:0x134c2c at pyodide.asm.wasm:0x217a84 at pyodide.asm.wasm:0x174a14 at pyodide.asm.wasm:0x135149 at pyodide.asm.wasm:0x135243 at pyodide.asm.wasm:0x1352e6 at pyodide.asm.wasm:0x1fff83 at pyodide.asm.wasm:0x1f98b5 at pyodide.asm.wasm:0x135329 at pyodide.asm.wasm:0x201f1b at pyodide.asm.wasm:0x1ff9ff at pyodide.asm.wasm:0x1f98b5 at pyodide.asm.wasm:0x135329 at pyodide.asm.wasm:0xf16d8 at Module.callPyObjectKwargs (pyproxy.gen.ts:360:23) at Module.callPyObject (pyproxy.gen.ts:384:17) at wrapper (pyodide.asm.js:14:205222)

[@bogdancarutasiu8918]

I get the following error when running your script: SyntaxError: 'await' outside function Any idea on how to solve it?

[@SamuelChan]

Hey a reference code is on my GitHub: github.com/onlyphantom/pyscript-demo/blob/main/index.html I guarantee you it works. :) All the 4 tutorial videos on pyscript in this series uses GitHub Pages for deployment and the live demo is up as well. If the script doesn’t work, GitHub Action would fail. So I’m quite confident it works :)

[@bogdancarutasiu8918]

@@SamuelChan, appreciate it!

[@commerceclassesbygoyalinst8373]

Hello Sir , How To Use Py-Script with HTML Form And Lists ?

[@SamuelChan]

Many ways to work with html form and lists. If you use Pandas, you can even use pd.to_html() and it will output html ( for example) that you weave into your html. You can also have a form that takes a csv, feed it to a third party server and then in pyscript, import requests to requests.get('raw.github.com/wherever-the-csv-is'). If I have time I'll put together a longer walkthrough to demonstrate those use-cases.

[@SamuelChan]

I've uploaded an end-to-end tutorial that uses HTML Form (using the POST method) with a pyscript app. You'll find it here: kzbin.info/www/bejne/pXnCo4eKec-ArK8 !

[@thoaihoquang1578]

my does not work they return: ModuleNotFoundError: No module named 'numpy'

[@SamuelChan]

Here's my file on github for easier reference bro: github.com/onlyphantom/pyscript-altair/blob/main/index.html

[@exukvera]

I want to see events. I press a button and a python script runs with variables taken from the site. With this we can ditch JS for good.

[@SamuelChan]

You should check out part 2 and part 3 of the tutorial series. We do just that and more. kzbin.info/aero/PLXsFtK46HZxXS9yBHkQXvaw1eLSIS5Mb- Part 2 integrates with a html form and the onSubmit behavior takes the query parameters to do something interesting. Part 3 builds an interactive web dashboard that you can drag and point with just pyscript and the altair viz library

[@jenglinux4948]

Sir I'm no python expert but how can i call a js function from python using pyscript ?

[@SamuelChan]

Oh we covered that as well over the series! kzbin.info/aero/PLXsFtK46HZxXS9yBHkQXvaw1eLSIS5Mb- I hope that helps!

[@ThankYouESM]

Could you please show us how it can generate a 600x600 image of random pixels?

[@SamuelChan]

If it’s just 600x600 random pixels, this is just a one liner numpy array creation. For example is white RGB pixel is [255,255,255] and if you create a 2d array of 600x600, you are just generating random numbers in the range of 0 - 255: np.random.rand(600,600,3) * 255 I have lots of videos using numpy in pyscript so it’s easy to incorporate that and then visualize it using either JavaScript / python. I have some other projects / tutorials on creating art with Python! How to create generative art (tutorial for NFT bros) with Python kzbin.info/www/bejne/iaq4c6efbNqAfM0 Image to ASCII art in Python | Converting images to ASCII w/ OpenCV (tutorial) kzbin.info/www/bejne/j2etpmuwe7dkgLs

[@ThankYouESM]

@@SamuelChan Awesome and Thank You!

[@scanty5695]

i don't get it , i just wanna use python to interact with the buttons and link them to an Email or whatever but all people find exciting is the pandas and numpy idk.. i just don't wanna learn JS to interact with HTML buttons

[@SamuelChan]

I would suggest looking at some of the other projects that we’re building with PyScript? Build a knowledge bot 📰 w/ PyScript's Fetch API + Wikimedia kzbin.info/www/bejne/aYDWd4mMh6erb8U Not sure if that will change your mind but in the 7-8 projects on pyscript I rarely use numpy or pandas. It’s a much larger field of possibilities

[@SamuelChan]

Quick link to the full “build with pyscript” playlist: PyScript Tutorial / Walkthroughs kzbin.info/aero/PLXsFtK46HZxXS9yBHkQXvaw1eLSIS5Mb- If there is a particular idea / direction that you see wasn’t covered i can add them to the backlog for future videos in that playlist

[@rajeevpunna8109]

- How to import specific module versions? ex: pandas==19.5.6

[@SamuelChan]

Actually it’s exactly what you expect. Specify it as such in py-env :)

[@yilmazalaca]

Hi, I can't import opencv module. How can I do that?

[@SamuelChan]

Any error message? :) You defined that in py-env but trying to import it returns an error?

[@yilmazalaca]

​@@SamuelChan yes. This is exactly what I want to handle it.

[@mpty2022]

is the source code (python) secure to distribute using pyscript?

[@SamuelChan]

You can source pyscript locally or from a CDN. And the python code itself isn’t really distributed - it gets compiled into WebAssembly to be run natively by the browser :)

[@mpty2022]

@@SamuelChan thanks, thats great

[@vcool]

The browser was blocking the editor. Wouldn't it be better to move the browser to the right half of the screen? The video needs to be redone.

[@SamuelChan]

Yeah will be more mindful of that the next time. I’m not a pro youtuber and am still new to this so still figuring things out as it goes

[@kharthigeyan]

does it support sqlite ?

[@waseksamin3216]

What!! Pyscript for frontend. Backend part has the sqlite

[@SamuelChan]

Can we add SQLite as a dependency? yes, you can. Specify it in the py-env tag just like how you’ve seen it done in the video :)

[@SamCoder96]

The py-env tag is not working for me

[@SamuelChan]

Must be either an indentation issue or that you’re on a much later version of pyscript - if it’s not too much an ask, please feel free to open a PR on GitHub once you got the fix! :)

[@constantindrabo2356]

The refresh is very slow

[@SamuelChan]

Yes the compilation time is a bit slow, but considering that this is the alpha release we’re optimistic it’ll get better over time?

[@rdark_benky3568]

how to open file with pyscript

[@SamuelChan]

Hey do you mean loading in an external python script?

[@rdark_benky3568]

@@SamuelChan I mean like opening file for example in python you would do that like f = open ("test.txt","r') f.readline() for line in f print(line)

[@rdark_benky3568]

But it doesn't work in pyscrip

[@SamuelChan]

I would be surprised if that works. If you want to display content of a file, you can use PyScript to do that (Part 2 of PyScript kzbin.info/www/bejne/pXnCo4eKec-ArK8). Otherwise, I would use JS bro. I'll dig a little deeper this weekend, to see if I find anything interesting :) Will update in the comments here

[@trenholmelodge1820]

had to reduce speed to 50%; please speak more slowly, we are all learning here. thanks.

[@SamuelChan]

Thanks for the feedback :)

[@coronaklledmebot4856]

nord theme sucks btw

[@SamuelChan]

Name me a better theme and I’ll give it a try!