Uploaded May 2022 | Updated September 2026, 1 week ago
In this video, we will look at the brand new PyScript framework, which uses Web Assembly and Pyodide to write Python and use Python Packages right in our HTML. And no, it will NOT replace JavaScript.
π PyScript Website & Examples:
pyscript.net
github.com/pyscript/pyscript/tree/main/examples
πCheck out my 300 page Web Dev Guide:
traversy.gumroad.com/l/web-dev-guide
π» All Courses
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro
1:45 - How it works
4:18 - Getting Started
5:17 - Disable formatOnSave
6:06 - Writing Python in HTML
6:37 - Mixing JavaScript
7:02 - Targeting DOM elements
8:15 - REPL
8:54 - Math module
9:18 - Env & 3rd party packages
11:10 - Using a separate .py file
13:16 - Handling events
14:45 - Shuffle array
16:04 - Using Element()
18:00 - Using multiple files
20:22 - Wrap up
In this video, we will look at the brand new PyScript framework, which uses Web Assembly and Pyodide to write Python and use Python Packages right in our HTML. And no, it will NOT replace JavaScript.
π PyScript Website & Examples:
pyscript.net
github.com/pyscript/pyscript/tree/main/examples
πCheck out my 300 page Web Dev Guide:
traversy.gumroad.com/l/web-dev-guide
π» All Courses
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro
1:45 - How it works
4:18 - Getting Started
5:17 - Disable formatOnSave
6:06 - Writing Python in HTML
6:37 - Mixing JavaScript
7:02 - Targeting DOM elements
8:15 - REPL
8:54 - Math module
9:18 - Env & 3rd party packages
11:10 - Using a separate .py file
13:16 - Handling events
14:45 - Shuffle array
16:04 - Using Element()
18:00 - Using multiple files
20:22 - Wrap up


![JavaScript Drag & Drop Sortable List Project
Learn the drag & drop API, array methods, spread operator, and DOM manipulation in this vanilla JavaScript project
Full 20 Projects Course:
https://www.udemy.com/course/web-projects-with-vanilla-javascript/?referralCode=F9B7C7FED834F91ADE75
Code: [MONTHNAME]2021
Code:
https://github.com/bradtraversy/vanillawebprojects/tree/master/sortable-list
TImestamps:
0:00 - Intro
2:27 - Insert List Items Into DOM
12:02 - Scramble List Items
18:44 - The CSS
31:07 - Drag & Drop Functionality
46:05 - Check Order JavaScript Drag & Drop Sortable List Project](https://i.ytimg.com/vi/wv7pvH1O5Ho/mqdefault.jpg)


