{"id":274912,"date":"2025-06-05T12:37:11","date_gmt":"2025-06-05T12:37:11","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/pyscript-run-python-in-your-browser-easily\/"},"modified":"2025-06-05T12:37:11","modified_gmt":"2025-06-05T12:37:11","slug":"pyscript-run-python-in-your-browser-easily","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=274912","title":{"rendered":"PyScript: Run Python in Your Browser Easily"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div id=\"article-start\">\n<p>In recent years, Python has become one of the most widely used programming languages. However, Python hasn\u2019t played a large role when it comes to web development specifically, until now. PyScript is here to change that. It is a new framework that allows you to run Python code directly on your web browser using only HTML and Python code. Regardless of your experience level, it\u2019s really simple to use PyScript to develop interactive web apps without knowing JavaScript. In this tutorial, you will learn about PyScript, what it is, how it works, and how to create your first browser-based Python app using it.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-what-is-pyscript\">What is PyScript<\/h3>\n<p>PyScript is an open-source framework that bridges the gap between <a href=\"https:\/\/www.analyticsvidhya.com\/blog\/2021\/05\/introduction-to-python-programming-beginners-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Python<\/a> and the web. It lets you run Python code directly in your web browser. Allowing you to write interactive Python applications that run entirely on the client side, without needing a backend server. PyScript is like writing a web app with Python instead of JavaScript. You can build simple interactive web tools, dashboards, and more, all with Python.<\/p>\n<h4 class=\"wp-block-heading\" id=\"h-key-features-of-pyscript\">Key Features of PyScript<\/h4>\n<ol class=\"wp-block-list\">\n<li><strong>Python in Browser:<\/strong> You can write Python code inside <code><py-script> <\/py-script><\/code>tags in your HTML file<\/li>\n<li><strong>No Environment Setup:<\/strong> No need to install any additional libraries or tools. It runs in the browser.<\/li>\n<li><strong>Interactivity with HTML: <\/strong>Easily integrates Python with HTML, CSS, and JavaScript.<\/li>\n<li><strong>Powered by WebAssembly:<\/strong> Uses <em>Pyodide<\/em>(Python compiled to WebAssembly) to run Python in the browser.<\/li>\n<\/ol>\n<h3 class=\"wp-block-heading\" id=\"h-how-to-use-pyscript-for-your-webapp\">How to Use PyScript for your WebApp?<\/h3>\n<p><strong>Step 1: Visit the Official Website<\/strong><\/p>\n<p>Visit the <a href=\"https:\/\/pyscript.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">official website<\/a>. This is the where you can explore demos, documentation, and try it yourself.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1844\" height=\"965\" src=\"https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_1.webp\" alt=\"PyScript Dashboard\" class=\"wp-image-236661\" srcset=\"https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_1.webp 1844w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_1-300x157.webp 300w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_1-768x402.webp 768w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_1-1536x804.webp 1536w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_1-150x78.webp 150w\" sizes=\"auto, (max-width: 1844px) 100vw, 1844px\"\/><\/figure>\n<\/div>\n<p><strong>Step 2: Set-up a Basic HTML File<\/strong><\/p>\n<p>To run PyScript, you\u2019ll need a simple HTML file that has the required framework.<\/p>\n<p><strong>Example code:<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>\n\n\n\n\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\"\/>\n\n\u00a0\u00a0\u00a0\u00a0<title>My First PyScript App<\/title>\n\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/pyscript.net\/latest\/pyscript.css\"\/>\n\n\u00a0\u00a0\u00a0\u00a0<script defer=\"defer\" src=\"https:\/\/pyscript.net\/latest\/pyscript.js\"\/>\n\n\u00a0\u00a0\n\n\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0<py-script>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name = \"PyScript\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print(f\"Hello, {name}! You are running Python in the browser.\")\n\n\u00a0\u00a0\u00a0\u00a0<\/py-script>\n\n\u00a0\u00a0\n\n<\/code><\/pre>\n<p><strong>Step 3<\/strong>: Open the HTML file in a Browser.<\/p>\n<p>By default, there will be 3 files:<\/p>\n<pre class=\"wp-block-preformatted\"><strong>main.py:<\/strong> Your Python code.<p><strong>Index.html:<\/strong> The main web page that includes PyScript.<\/p><p><strong>pyscript.toml:<\/strong> A configuration file listing any extra Python packages you<br\/>want to use.<\/p><\/pre>\n<p>Update the code files with the appropriate codes and start experimenting:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1783\" height=\"922\" src=\"https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_3.webp\" alt=\"Tic-Tac-Toe \" class=\"wp-image-236659\" srcset=\"https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_3.webp 1783w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_3-300x155.webp 300w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_3-768x397.webp 768w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_3-1536x794.webp 1536w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_3-150x78.webp 150w\" sizes=\"auto, (max-width: 1783px) 100vw, 1783px\"\/><\/figure>\n<\/div>\n<p>You can try PyScript Playground at <a href=\"https:\/\/pyscript.com\/@examples\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PyScript examples<\/a> to test code snippets directly in your browser.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1844\" height=\"966\" src=\"https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_2.webp\" alt=\"Sample Codes\" class=\"wp-image-236660\" srcset=\"https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_2.webp 1844w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_2-300x157.webp 300w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_2-768x402.webp 768w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_2-1536x805.webp 1536w, https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/image_2-150x79.webp 150w\" sizes=\"auto, (max-width: 1844px) 100vw, 1844px\"\/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-hands-on-with-pyscript\">Hands-on with PyScript<\/h2>\n<p>Now that you are familiar with how the PyScript interface works, let us perform some hands-on with it.<\/p>\n<p>We will build a two-player tic-tac-toe game.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-step-1-update-main-py\">Step 1: Update <em>main.py\u00a0<\/em><\/h3>\n<p>Add the <em>main.py<\/em> file with the <code>TicTacToe<\/code> class, which contains the game logic, user interactions, and UI updates. It will use PyWeb to connect Python with HTML, making the game fully interactive within the browser.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>from pyweb import pydom\n\nclass TicTacToe:\n\n\u00a0\u00a0\u00a0\u00a0def __init__(self):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.board = pydom[\"table#board\"]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.status = pydom[\"h2#status\"]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.console = pydom[\"script#console\"][0]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.init_cells()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.init_winning_combos()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.new_game(...)\n\n\u00a0\u00a0\u00a0\u00a0def set_status(self, text):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.status.html = text\n\n\u00a0\u00a0\u00a0\u00a0def init_cells(self):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.cells = []\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for i in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0row = []\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for j in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell = pydom[f\"div#cell{i}{j}\"][0]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0assert cell\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0row.append(cell)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.cells.append(row)\n\n\u00a0\u00a0\u00a0\u00a0def init_winning_combos(self):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.winning_combos = []\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0# winning columns\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for i in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0combo = []\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for j in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0combo.append((i, j))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.winning_combos.append(combo)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0# winning rows\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for j in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0combo = []\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for i in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0combo.append((i, j))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.winning_combos.append(combo)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0# winning diagonals\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.winning_combos.append([(0, 0), (1, 1), (2, 2)])\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.winning_combos.append([(0, 2), (1, 1), (2, 0)])\n\n\u00a0\u00a0\u00a0\u00a0def new_game(self, event):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.clear_terminal()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print('=================')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print('NEW GAME STARTING')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for i in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for j in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.set_cell(i, j, \"\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.current_player = \"x\"\n\nexperimenting\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.set_status(f'{self.current_player} playing...')\n\n\u00a0\u00a0\u00a0\u00a0def next_turn(self):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0winner = self.check_winner()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if winner == \"tie\":\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.set_status(\"It's a tie!\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.current_player = \"\" # i.e., game ended\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0elif winner is not None:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.set_status(f'{winner} wins')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.current_player = \"\" # i.e., game ended\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if self.current_player == \"x\":\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.current_player = \"o\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.current_player = \"x\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.set_status(f'{self.current_player} playing...')\n\n\u00a0\u00a0\u00a0\u00a0def check_winner(self):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Check whether the game as any winner.\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Return \"x\", \"o\", \"tie\" or None. None means that the game is still playing.\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0# check whether we have a winner\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for combo in self.winning_combos:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0winner = self.get_winner(combo)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if winner:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0# highlight the winning cells\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for i, j in combo:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.cells[i][j].add_class(\"win\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return winner\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0# check whether it's a tie\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for i in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for j in (0, 1, 2):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if self.get_cell(i, j) == \"\":\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0# there is at least an empty cell, it's not a tie\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return None # game still playing\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return \"tie\"\n\n\u00a0\u00a0\u00a0\u00a0def get_winner(self, combo):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0If all the cells at the given points have the same value, return it.\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Else return \"\".\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Each point is a tuple of (i, j) coordinates.\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Example:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.get_winner([(0, 0), (1, 1), (2, 2)])\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"\"\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0assert len(combo) == 3\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0values = [self.get_cell(i, j) for i, j in combo]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if values[0] == values[1] == values[2] and values[0] != \"\":\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return values[0]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return \"\"\n\n\u00a0\u00a0\u00a0\u00a0def set_cell(self, i, j, value):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0assert value in (\"\", \"x\", \"o\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell = self.cells[i][j]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell.html = value\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if \"x\" in cell.classes:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell.remove_class(\"x\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if \"o\" in cell.classes:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell.remove_class(\"o\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if \"win\" in cell.classes:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell.remove_class(\"win\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if value != \"\":\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell.add_class(value)\n\n\u00a0\u00a0\u00a0\u00a0def get_cell(self, i, j):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell = self.cells[i][j]\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value = cell.html\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0assert value in (\"\", \"x\", \"o\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return value\n\n\u00a0\u00a0\u00a0\u00a0def click(self, event):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0i = int(event.target.getAttribute('data-x'))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0j = int(event.target.getAttribute('data-y'))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print(f'Cell {i}, {j} clicked: ', end='')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if self.current_player == \"\":\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print('game ended, nothing to do')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value = self.get_cell(i, j)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if value == \"\":\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print('cell empty, setting it')\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.set_cell(i, j, self.current_player)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.next_turn()\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print(f'cell already full, cannot set it')\n\n\u00a0\u00a0\u00a0\u00a0def clear_terminal(self):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.console._js.terminal.clear()\n\n\u00a0\u00a0\u00a0\u00a0def toggle_terminal(self, event):\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0hidden = self.console.parent._js.getAttribute(\"hidden\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if hidden:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.console.parent._js.removeAttribute(\"hidden\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else:\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0self.console.parent._js.setAttribute(\"hidden\", \"hidden\")\n\nGAME = TicTacToe()<\/code><\/pre>\n<h3 class=\"wp-block-heading\" id=\"h-step-2-create-a-css-file\">Step 2: Create a CSS file<\/h3>\n<p>Create a <em>style.css<\/em> file within the newly created <strong>assets<\/strong> folder to define the layout and the style for the Tic-Tac-Toe game. This will deal with the styling of the board, cells, and any status messages.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>h1, h2 {\n\n\u00a0\u00a0\u00a0\u00a0font-family: 'Indie Flower', 'Comic Sans', cursive;\n\n\u00a0\u00a0\u00a0\u00a0text-align: center;\n\n}\n\n#board {\n\n\u00a0\u00a0\u00a0\u00a0font-family: 'Indie Flower', 'Comic Sans', cursive;\n\n\u00a0\u00a0\u00a0\u00a0position: relative;\n\n\u00a0\u00a0\u00a0\u00a0font-size: 120px;\n\n\u00a0\u00a0\u00a0\u00a0margin: 1% auto;\n\n\u00a0\u00a0\u00a0\u00a0border-collapse: collapse;\n\n}\n\n#board td {\n\n\u00a0\u00a0\u00a0\u00a0border: 4px solid rgb(60, 60, 60);\n\n\u00a0\u00a0\u00a0\u00a0width: 90px;\n\n\u00a0\u00a0\u00a0\u00a0height: 90px;\n\n\u00a0\u00a0\u00a0\u00a0vertical-align: middle;\n\n\u00a0\u00a0\u00a0\u00a0text-align: center;\n\n\u00a0\u00a0\u00a0\u00a0cursor: pointer;\n\n}\n\n#board td div {\n\n\u00a0\u00a0\u00a0\u00a0width: 90px;\n\n\u00a0\u00a0\u00a0\u00a0height: 90px;\n\n\u00a0\u00a0\u00a0\u00a0line-height: 90px;\n\n\u00a0\u00a0\u00a0\u00a0display: block;\n\n\u00a0\u00a0\u00a0\u00a0overflow: hidden;\n\n\u00a0\u00a0\u00a0\u00a0cursor: pointer;\n\n}\n\n.x {\n\n\u00a0\u00a0\u00a0\u00a0color: darksalmon;\n\n\u00a0\u00a0\u00a0\u00a0position: relative;\n\n\u00a0\u00a0\u00a0\u00a0font-size: 1.2em;\n\n\u00a0\u00a0\u00a0\u00a0cursor: default;\n\n}\n\n.o {\n\n\u00a0\u00a0\u00a0\u00a0color: aquamarine;\n\n\u00a0\u00a0\u00a0\u00a0position: relative;\n\n\u00a0\u00a0\u00a0\u00a0font-size: 1.0em;\n\n\u00a0\u00a0\u00a0\u00a0cursor: default;\n\n}\n\n.win {\n\n\u00a0\u00a0\u00a0\u00a0background-color: beige;\n\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\" id=\"h-step-3-update-index-html\">Step 3: Update <em>index.html<\/em><\/h3>\n<p>Modifying the <em>index.html<\/em> file to reference the PyScript setup, load <em>main.py<\/em>, define the game board structure, and point to the <em>style.css<\/em> (from your assets folder) for the styling.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>\n\n\n\n\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- Recommended meta tags -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- PyScript CSS -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/pyscript.net\/releases\/2024.1.1\/core.css\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- CSS for examples -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\".\/assets\/css\/examples.css\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- This script tag bootstraps PyScript -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script type=\"module\" src=\"https:\/\/pyscript.net\/releases\/2024.1.1\/core.js\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- Custom CSS -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<link href=\"https:\/\/fonts.googleapis.com\/css?family=Indie+Flower\" rel=\"stylesheet\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\".\/assets\/css\/tictactoe.css\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- for splashscreen -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script type=\"module\"><![CDATA[\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const loading = document.getElementById('loading');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addEventListener('py:ready', () => loading.close());\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loading.showModal();\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]><\/script>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<title>Tic Tac Toe<\/title>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<link rel=\"icon\" type=\"image\/png\" href=\".\/assets\/favicon.png\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<dialog id=\"loading\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/dialog>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<nav class=\"navbar\" style=\"background-color: #000000\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/nav>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section class=\"pyscript\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script type=\"py\" src=\".\/main.py\" config=\".\/pyscript.toml\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<table id=\"board\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr><tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/table>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 id=\"status\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button id=\"btn-new-game\" py-click=\"GAME.new_game\">New game<\/button>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button id=\"btn-toggle-terminal\" py-click=\"GAME.toggle_terminal\">Hide\/show terminal<\/button>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script id=\"console\" type=\"py\" terminal=\"\"\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0\u00a0\u00a0\n\n<\/code><\/pre>\n<h3 class=\"wp-block-heading\" id=\"h-step-4-update-pyscript-toml\">Step 4: Update <em>pyscript.toml<\/em><\/h3>\n<p>Updating the <em>pyscript.toml<\/em> file with the necessary configuration needed by the app, including dependencies, file paths, etc. This ensures that PyScript knows how to load and run the Python code properly. Here are the contents of the <em>pyscript.toml<\/em> file for our Tic-Tac-Toe application:<\/p>\n<p><strong>Config:<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>name = \"Tic Tac Toe\"\n\ndescription = \"A Tic-Tac-Toe game written in PyScript that allows people to take turns.\"<\/code><\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>\n<iframe src=\"https:\/\/cdn.analyticsvidhya.com\/wp-content\/uploads\/2025\/06\/recording-2.webm\" loading=\"lazy\" title=\"YouTube video\" allowfullscreen=\"\"><\/iframe>\n<\/p>\n<p>Here you go with your first project on PyScript.\u00a0<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n<p>Python is being used in <a href=\"https:\/\/www.analyticsvidhya.com\/blog\/2023\/05\/what-is-data-science-a-complete-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Data Science<\/a>, <a href=\"https:\/\/www.analyticsvidhya.com\/blog\/2021\/09\/introduction-to-artificial-intelligence-for-beginners\/\" target=\"_blank\" rel=\"noreferrer noopener\">AI<\/a>, Automation, and in education like never before. However, there hasn\u2019t been a native home for Python on the web until now. PyScript has arrived and fuses the simplicity of Python with the accessibility of the web. It is still maturing, but it has already created lots of opportunities for developers, educators, and learners alike.<\/p>\n<div class=\"border-top py-3 author-info my-4\">\n<div class=\"author-card d-flex align-items-center\">\n<div class=\"flex-shrink-0 overflow-hidden\">\n                                    <a href=\"https:\/\/www.analyticsvidhya.com\/blog\/author\/jsoumil03267854504\/\" class=\"text-decoration-none active-avatar\"><br \/>\n                                                                       <img decoding=\"async\" src=\"https:\/\/av-eks-lekhak.s3.amazonaws.com\/media\/lekhak-profile-images\/converted_image_reG34wL.webp\" width=\"48\" height=\"48\" alt=\"Soumil Jain\" loading=\"lazy\" class=\"rounded-circle\"\/><\/p>\n<p>                                <\/a>\n                                <\/div>\n<\/p><\/div>\n<p>Data Scientist | AWS Certified Solutions Architect | AI &amp; ML Innovator<\/p>\n<p>As a Data Scientist at Analytics Vidhya, I specialize in Machine Learning, Deep Learning, and AI-driven solutions, leveraging NLP, computer vision, and cloud technologies to build scalable applications.<\/p>\n<p>With a B.Tech in Computer Science (Data Science) from VIT and certifications like AWS Certified Solutions Architect and TensorFlow, my work spans Generative AI, Anomaly Detection, Fake News Detection, and Emotion Recognition. Passionate about innovation, I strive to develop intelligent systems that shape the future of AI.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p><h4 class=\"fs-24 text-dark\">Login to continue reading and enjoy expert-curated content.<\/h4>\n<p>                        <button class=\"btn btn-primary mx-auto d-table\" data-bs-toggle=\"modal\" data-bs-target=\"#loginModal\" id=\"readMoreBtn\">Keep Reading for Free<\/button>\n                    <\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>In recent years, Python has become one of the most widely used programming languages. However, Python hasn\u2019t played a large role when it comes to web development specifically, until now. PyScript is here to change that. It is a new framework that allows you to run Python code directly on your web browser using only [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":274913,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[16107,14875,101982,21302,2753],"dealstore":[],"offerexpiration":[],"class_list":["post-274912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-browser","tag-easily","tag-pyscript","tag-python","tag-run"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>PyScript: Run Python in Your Browser Easily - Som2ny Network<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fivemor.com\/?p=274912\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PyScript: Run Python in Your Browser Easily - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\"In recent years, Python has become one of the most widely used programming languages. However, Python hasn\u2019t played a large role when it comes to web development specifically, until now. PyScript is here to change that. It is a new framework that allows you to run Python code directly on your web browser using only [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=274912\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-05T12:37:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"278\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=274912#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=274912\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"PyScript: Run Python in Your Browser Easily\",\"datePublished\":\"2025-06-05T12:37:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=274912\"},\"wordCount\":708,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=274912#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp\",\"keywords\":[\"browser\",\"Easily\",\"PyScript\",\"Python\",\"Run\"],\"articleSection\":[\"Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=274912#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=274912\",\"url\":\"https:\/\/fivemor.com\/?p=274912\",\"name\":\"PyScript: Run Python in Your Browser Easily - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=274912#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=274912#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp\",\"datePublished\":\"2025-06-05T12:37:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=274912#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=274912\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=274912#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp\",\"width\":512,\"height\":278},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=274912#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PyScript: Run Python in Your Browser Easily\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fivemor.com\/#website\",\"url\":\"https:\/\/fivemor.com\/\",\"name\":\"Som2ny Network\",\"description\":\"Daily Deals\",\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fivemor.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fivemor.com\/#organization\",\"name\":\"Som2ny Network\",\"url\":\"https:\/\/fivemor.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"width\":300,\"height\":86,\"caption\":\"Som2ny Network\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/fivemor.com\"],\"url\":\"https:\/\/fivemor.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PyScript: Run Python in Your Browser Easily - Som2ny Network","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fivemor.com\/?p=274912","og_locale":"en_US","og_type":"article","og_title":"PyScript: Run Python in Your Browser Easily - Som2ny Network","og_description":"In recent years, Python has become one of the most widely used programming languages. However, Python hasn\u2019t played a large role when it comes to web development specifically, until now. PyScript is here to change that. It is a new framework that allows you to run Python code directly on your web browser using only [&hellip;]","og_url":"https:\/\/fivemor.com\/?p=274912","og_site_name":"Som2ny Network","article_published_time":"2025-06-05T12:37:11+00:00","og_image":[{"width":512,"height":278,"url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp","type":"image\/webp"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=274912#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=274912"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"PyScript: Run Python in Your Browser Easily","datePublished":"2025-06-05T12:37:11+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=274912"},"wordCount":708,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=274912#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp","keywords":["browser","Easily","PyScript","Python","Run"],"articleSection":["Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=274912#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=274912","url":"https:\/\/fivemor.com\/?p=274912","name":"PyScript: Run Python in Your Browser Easily - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=274912#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=274912#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp","datePublished":"2025-06-05T12:37:11+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=274912#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=274912"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=274912#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/06\/pyScript.webp.webp","width":512,"height":278},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=274912#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"PyScript: Run Python in Your Browser Easily"}]},{"@type":"WebSite","@id":"https:\/\/fivemor.com\/#website","url":"https:\/\/fivemor.com\/","name":"Som2ny Network","description":"Daily Deals","publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fivemor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fivemor.com\/#organization","name":"Som2ny Network","url":"https:\/\/fivemor.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","width":300,"height":86,"caption":"Som2ny Network"},"image":{"@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","caption":"admin"},"sameAs":["https:\/\/fivemor.com"],"url":"https:\/\/fivemor.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/274912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=274912"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/274912\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/274913"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=274912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=274912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=274912"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=274912"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=274912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}