Tools
Tools: PyScript Language: Running Python Directly in the Browser
2026-02-14
0 views
admin
What Is PyScript? ## Why PyScript Exists ## How PyScript Works (Under the Hood) ## Core Components ## Basic PyScript Example ## Minimal HTML + Python ## Accessing the DOM with Python ## Installing Python Packages in PyScript ## Data Science in the Browser ## Pandas Example ## PyScript vs JavaScript ## Common Use Cases ## 1. Education & Learning ## 2. Data Visualization ## 3. Prototyping ## 4. Scientific Publishing ## Limitations of PyScript ## PyScript in Production: Is It Ready? ## Future of PyScript ## When Should You Use PyScript? ## Final Thoughts Web development has traditionally been dominated by JavaScript. For years, Python developers had to rely on backend frameworks or transpilers to bring Python logic to the web. PyScript changes this model by allowing native Python execution inside the browser, directly alongside HTML. In this article, we’ll explore what PyScript is, how it works, its architecture, use cases, limitations, and how it fits into the modern web ecosystem. PyScript is a framework that enables Python to run in the browser using modern web technologies. It allows developers to write Python code that interacts with the DOM, processes data, and renders UI, without writing JavaScript. PyScript is built and maintained by Anaconda, the same organization behind the popular Python distribution and data science ecosystem. Before PyScript, running Python on the web meant: PyScript removes this separation by enabling client-side Python execution, which unlocks: PyScript relies on WebAssembly (Wasm) to execute Python efficiently in the browser. 1.WebAssembly Runtime No build tools. No backend. No JavaScript required. PyScript allows direct interaction with HTML elements. This mirrors JavaScript DOM manipulation — but written entirely in Python. You can load Python packages directly in the browser. Many scientific libraries work out of the box thanks to Pyodide. One of PyScript’s strongest advantages is client-side data science. This runs fully in the browser, no server, no API calls. PyScript is not a JavaScript replacement, but a complementary tool. While powerful, PyScript has constraints: PyScript is production-capable for specific use cases, especially: However, for large consumer applications, JavaScript frameworks still dominate due to performance and ecosystem maturity. The future direction includes: As WebAssembly continues to evolve, Python in the browser will only become more viable. PyScript represents a paradigm shift in web development by removing the strict dependency on JavaScript for browser logic. It opens the web to Python developers in a direct, native, and expressive way. It may not replace JavaScript, but it dramatically expands what’s possible with Python on the web. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK:
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body> <h1>PyScript Demo</h1> <py-script>
print("Hello from Python running in the browser!")
</py-script> </body>
</html> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body> <h1>PyScript Demo</h1> <py-script>
print("Hello from Python running in the browser!")
</py-script> </body>
</html> CODE_BLOCK:
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body> <h1>PyScript Demo</h1> <py-script>
print("Hello from Python running in the browser!")
</py-script> </body>
</html> CODE_BLOCK:
<input id="name" placeholder="Enter your name">
<button id="btn">Submit</button>
<p id="output"></p> <py-script>
from js import document def greet(event): name = document.getElementById("name").value document.getElementById("output").innerText = f"Hello, {name}" document.getElementById("btn").addEventListener("click", greet)
</py-script> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
<input id="name" placeholder="Enter your name">
<button id="btn">Submit</button>
<p id="output"></p> <py-script>
from js import document def greet(event): name = document.getElementById("name").value document.getElementById("output").innerText = f"Hello, {name}" document.getElementById("btn").addEventListener("click", greet)
</py-script> CODE_BLOCK:
<input id="name" placeholder="Enter your name">
<button id="btn">Submit</button>
<p id="output"></p> <py-script>
from js import document def greet(event): name = document.getElementById("name").value document.getElementById("output").innerText = f"Hello, {name}" document.getElementById("btn").addEventListener("click", greet)
</py-script> CODE_BLOCK:
<py-config>
packages = ["numpy", "pandas"]
</py-config> <py-script>
import numpy as np
import pandas as pd print(np.array([1, 2, 3]) * 10)
</py-script> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
<py-config>
packages = ["numpy", "pandas"]
</py-config> <py-script>
import numpy as np
import pandas as pd print(np.array([1, 2, 3]) * 10)
</py-script> CODE_BLOCK:
<py-config>
packages = ["numpy", "pandas"]
</py-config> <py-script>
import numpy as np
import pandas as pd print(np.array([1, 2, 3]) * 10)
</py-script> CODE_BLOCK:
import pandas as pd data = { "Language": ["Python", "JavaScript", "Rust"], "Popularity": [95, 90, 70]
} df = pd.DataFrame(data)
df Enter fullscreen mode Exit fullscreen mode CODE_BLOCK:
import pandas as pd data = { "Language": ["Python", "JavaScript", "Rust"], "Popularity": [95, 90, 70]
} df = pd.DataFrame(data)
df CODE_BLOCK:
import pandas as pd data = { "Language": ["Python", "JavaScript", "Rust"], "Popularity": [95, 90, 70]
} df = pd.DataFrame(data)
df - Writing a backend API (Flask/Django/FastAPI)
- Using JavaScript frameworks for frontend logic
- Bridging Python and JavaScript through APIs - Python-first web applications
- Browser-based data science and visualization
- Educational and interactive Python content
- Rapid prototyping without backend infrastructure - Python is compiled to WebAssembly using Pyodide
- Runs in a secure browser sandbox - A Python distribution compiled for the web
- Includes NumPy, Pandas, Matplotlib, and more - Custom HTML tags allow Python execution
- Python can manipulate DOM elements directly - Interactive Python tutorials
- Live coding notebooks in the browser - Browser-based analytics dashboards
- Lightweight data exploration tools - Rapid UI + logic experiments
- Proof-of-concept applications - Reproducible research in web documents - Slower execution than native JavaScript
- Large initial load size (Pyodide runtime)
- Limited access to system resources
- Not suitable for: High-performance games
Real-time applications
Large-scale production frontends (yet)
- High-performance games
- Real-time applications
- Large-scale production frontends (yet) - High-performance games
- Real-time applications
- Large-scale production frontends (yet) - Internal tools
- Educational platforms
- Data-driven interfaces - Smaller runtime bundles
- Better performance optimizations
- Deeper integration with web standards
- Improved interoperability with JavaScript frameworks - You are Python-first
- You want browser-based data processing
- You are building interactive educational or analytical tools
- You want minimal backend complexity - You need ultra-low latency
- You are building large-scale consumer web apps
- You rely heavily on JavaScript-only libraries
how-totutorialguidedev.toaimlserverpythonjavascript