PyScript: An open source platform for Python in the browser

https://pyscript.net/

by xiaodai • 2 years ago

274 145 2 years ago

pyscript.net

Loeffelmann• 2 years ago

How is this different from pyodide[0]?

[0] https://pyodide.org/en/stable/

santiagobasulto• 2 years ago

This uses pyodide. It's more like a Python to JS transpiler (even if it's not). It's to create browser apps using Python. So it's Pyodide + a browser API.

azakai• 2 years ago

They also support MicroPython as an option now and not just Pyodide,

https://pyscript.net/tech-preview/micropython/about.html

In fact the main PyScript site uses MicroPython now, I see in the dev console (micropython.mjs and micropython.wasm).

qsort• 2 years ago

Pyodide is a port of CPython to the WebAssembly platform. PyScript is a framework that uses Pyodide to provide a framework for developing Python applications in the browser. Its elevator pitch would be "python inside script tags via pyodide".

v3ss0n7• 2 years ago

Its a wrapper.

bouncing8• 2 years ago

Pyodide is a runtime.

PyScript can use Pyodide or MicroPython. MicroPython is actually quite small.

On top of the runtime, PyScript gives you some pleasantries and a lot of quality-of-life improvements for actually using Python for web programming, not just being able to run Python code.

mg2• 2 years ago

The homepage left me confused, and also after reading the documentation, I'm not sure what this is.

I tinkered a bit to try it myself.

Turns out you can throw this into your website and it will display "Hello World":

    <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
    <script type="py">
        import js
        js.document.querySelector("body").innerText = "Hello World"
    </script>

So it seems to be a script that looks for scripts of type "py" and transpiles them from Python to JavaScript via Pyodide?

On the other hand, the demo on the homepage is a repl. And the title says "platform". So I'm still confused.

pansa23• 2 years ago

transpiles them from Python to JavaScript

There are projects that do that, but it looks like PyScript instead runs Python code directly. It uses a Python interpreter compiled to WebAssembly - either CPython (from Pyodide) or MicroPython.

deisteve2• 2 years ago

does this mean we can install FastAPI in the browser?

rty32• 2 years ago

Without actually reading the documentation or source code -- I guess "js" package is just an API that somehow maps to the real "window" object and calls those DOM methods via some sort of Proxy object.

mg2• 2 years ago

Probably. It is part of Pyodide, not something this PyScript project adds:

https://pyodide.org/en/stable/usage/quickstart.html#accessin...

dr_kiszonka• 2 years ago

I found some info about the terminal here: https://docs.pyscript.net/2024.8.2/user-guide/terminal/

(I was hoping to be able to run Python in the browser's console.)

sjamaan• 2 years ago

And the title says "platform". So I'm still confused.

I hate it when people say "platform" or use other vague/ill defined terms. Just say it's a JS implementation of Python that evaluates code in script tags for python, or some such.

pphysch4• 2 years ago

PyScript is a platform for using Python in the browser to build actual applications.

skeledrew3• 2 years ago

It isn't a JS implementation. It's implemented in Web Assembly and can communicate with JS if needed.

amanzi• 2 years ago

I used this to create a Markdown renderer a while back. You can see the very simple source code here: https://pyscript.com/@stuartmaxwell/markdown-previewer-v2/la...

The app won't run well on mobile but should be fine on desktop.

I used this code in a blog application I was writing in Django.

IshKebab2• 2 years ago

The examples were about as slow as I imagined they would be. 20 seconds to draw a simple graph.

nmstoker2• 2 years ago

The majority of that is the upfront one-off loading time for pyodide to get going along with required packages. Subsequent runs for things will be substantially faster.

IshKebab2• 2 years ago

That is a subsequent run (because I also wondered if caching etc would improve hot loads, but it doesn't).

bArray2• 2 years ago

I've been looking for something like this, but I'm still unsure it quite hits the spot. I think that this would be very interesting if it allows a person to run a blog like a Jupyter notebook.

I have a lightweight hack [1] that runs Python in markdown documents and can output basic images/graphs - which is embedded into static pages. The point was being able to write an article that somebody else could see the code behind it and test themselves, e.g. [2]. One of the browsers I test in is Netsurf with JS disabled. Unfortunately it doesn't look great in Lynx.

[1] https://gitlab.com/danbarry16/pandoc-highlight-filter

[2] https://coffeespace.org.uk/projects/langtons-ant-universe.ht...

DerThorsten• 2 years ago

There is jupyerlite which does exactly that https://github.com/jupyterlite/jupyterlite

Kernels are compiled to wasm and can therefore run in the browser.

Try it out at: https://jupyterlite.readthedocs.io/en/stable/_static/lab/ind...

Its easy to create your own deployments, there is a template repo for that https://github.com/jupyterlite/demo

bArray2• 2 years ago

There is jupyerlite which does exactly that https://github.com/jupyterlite/jupyterlite

Had a quick look, this seems quite cool!

Is there alternative output is the WASM is not run? It would be good if it defaulted to a pre-run static output, otherwise users could be left with nothing?

agumonkey2• 2 years ago

What other language would people choose in a browser? Lua ?

thesuperbigfrog• 2 years ago

> What other language would people choose in a browser? Lua?

Brendan Eich originally wanted to use Scheme. There are some Scheme in Javascript implementations:

https://www.biwascheme.org/

https://lips.js.org/

https://www.wescheme.org/

https://web.scheme.org/

agumonkey2• 2 years ago

Yeah but I was mostly wondering about mainstream programmers. The chance of people liking a lisp are still low(to my own sadness)

zygentoma• 2 years ago

Isn't this the same concept as brython? (BRowser pYTHON)

https://brython.info/

https://github.com/brython-dev/brython

pansa23• 2 years ago

Brython seems to be a Python => JS translator, rather than an in-browser Python implementation. Similar end result, but works in a completely different way.

https://yasoob.me/2019/05/22/running-python-in-the-browser/

miohtama2• 2 years ago

AFAIK Brython cannot translate some of popular Python libraries. Python libraries, esp. Data science ones, are often the reason why developers pick Python.

bschwindHN4• 2 years ago

Our phones are getting faster every year, we must find a way to slow things down even more.

poikroequ2• 2 years ago

The dawn of the PyScript web frameworks is upon us...

amy-petrik-214• 2 years ago

We must think of the lessons of docker, the lessons of conda. Why, what with the web environments, so many, is there not a way to unify an environment? Of course! A virtual environment of python, on a virtual environment of the docker machine, on a virtual web browser, and there can be JIT throughout to make it only painfully slow and not excruciatingly slow! Abstraction is a Good Thing (TM) and the more abstraction, the better. There really ought to be an object oriented abstraction layer factory generator factory using Java OOP best practices, also a good thing (TM). If all goes well we may even be able to reach abstraction tier 17, which is two more layers of abstraction than the industry standard 15.

See: https://www.corporate-rebels.com/blog/cia-field-manual

bouncing8• 2 years ago

I wrote one. https://puepy.dev

Wowfunhappy• 2 years ago

I agree with the sentiment but the purpose of WebAssembly is to be a compiler target for other languages, so we're not stuck with Javascript until the end of time, right? Will this always necessarily be substantially slower than Javascript?

pansa23• 2 years ago

Will this always necessarily be substantially slower than Javascript?

Yes, interpreted Python will always be slower than JIT-compiled JavaScript.

PyPy.js [0] is a JIT compiler for Python that runs in the browser - its performance could be similar to JS but its development is currently “sleeping”.

[0] https://github.com/pypyjs/pypyjs

bouncing8• 2 years ago

You're replacing one interpreted language for another.

Yes, Python is among the slower interpreted languages out there, but still. The debate between fast execution and programmer productivity is not a new one. Given Python's popularity, I'd say it's settled.

bschwindHN4• 2 years ago

I suppose you didn't run any of the examples on the website.

v3ss0n7• 2 years ago

I can't find any real world use case there. If you want to run ML Models you can build them to Onnx https://onnxruntime.ai/docs/tutorials/web/ . Will this efficient to build browser based app in place of JS/TS ?

h8hawk• 2 years ago

Perhaps some people don't want to touch JS/TS

mapcars4• 2 years ago

TS is actually has better typing than Python (mypy). And the whole React (Vue, etc) infrastructure around it. Without these two things I wouldn't even bother writing frontend code.

quotemstr• 2 years ago

Programming language ought to be decoupled from deployment environment.

simonh• 2 years ago

Not a fan of JavaScript in the browser either then?

apwheele3• 2 years ago

For folks interested in seeing a usecase, I have a panel dashboard of Dallas crime statistics at:

https://crimede-coder.com/graphs/Dallas_Dashboard

Startup takes around a minute (which includes installing various python libraries + loading an external 5mb dataset). But once up and running it is quite responsive. (And works fine on my iphone.)

Many businesses I work with use Tableau free versions, and just manually update the data (since the free doesn't allow direct connections to a datastore). This is a free alternative (I use github actions to build a zipped up csv file that is pulled into the environment).

miohtama2• 2 years ago

Awesome example of using in production! Nice work.

I wish we get over with the loading hickups soon. Do you know if there is any work going on to make it start faster/smaller/less janky?

solarexplorer• 2 years ago

Maybe some kind of snapshot feature, where you can just load an snapshot of the already initialized state?

stackskipton• 2 years ago

Memory usage seems quite high. According to Browser Task Manager, the tab is consuming 657MB compared to 25-70MB most other tabs are using.

apwheele3• 2 years ago

Yes this is part of the price of running it client side instead of having a server do all the data manipulation. It is pretty much a wash for RAM for me vs running locally (local is 200-300 for python + 100-200 for chrome for just that web-page).

bbminner• 2 years ago

Woah, what browser/page combination can fit into ~50Mb these days? I am simply used to the fact that most pages take at least 200Mb RAM in task manager.

cyanydeez• 2 years ago

Youd see the sme for any competent pyhon app.

andybak• 2 years ago

Startup takes around a minute

I wonder what your bottleneck was? It was about 20 seconds for me on domestic broadband.

jeroenhd• 2 years ago

Based on the temperature of my phone after clicking that link, probably CPU or memory.

shipp02• 2 years ago

Does it work on firefox for anyone? The spinner keeps spinning on my MacBook Air.

1d22a• 2 years ago

Working fine for me, Firefox 128.0.3 on Fedora

agolio• 2 years ago

Cool site!

Many businesses I work with use Tableau free versions, and just manually update the data

Why not just use e.g React/ Angular?

Or is it a question of needing python for the data analytics, and for server cost reasons not wanting it to be run on the server side?

apwheele3• 2 years ago

This example could be all javascript (and I try to do that in some scenarios). Most of the other demo's on my site are just javascript/D3 or other libraries even with some slightly more advanced metrics, https://crimede-coder.com/demos.

There are some cases in which I do want python numerical libraries though. Say I wanted to do a forecast ARIMA model based on arbitrary combined inputs for the graphs, or do different types of spatial clustering of the geographic data. Those would be cases pyscript would make sense.

The public dashboards yes IMO easier to not have to worry about server.

eddd-ddde• 2 years ago

Could you somehow "snapshot" the runtime after the initial processing is ready and have clients just load that?

I imagine there's a ton of preprocessing that could be, well, preprocessed.

senkora• 2 years ago

That's pretty cool. In case anyone reading this is generally interested in crime statistics dashboards, I'll link to the NYPD's: https://compstat.nypdonline.org/

_tpdt• 2 years ago

You can connect tableau public to google sheets

Terretta• 2 years ago

Startup takes around a minute

On iPad Pro 13" from fall 2023, over NYC area broadband and WiFi, it takes about 8 seconds from clicking your link for the spinner (which seems to hang from seconds 4 - 8) to clear and the filters to become active.

Not sure how long bootstrapping enough Python into Safari on an iPad to run a Panel app would take, but I certainly imagined more than 8 seconds. (Shift refresh takes ~6.)

jerpint• 2 years ago

I wonder if this could be combined with fastHTML to have a full python html rendered client side

dataguy_• 2 years ago

yep. would be nice as well to have LLMs trained on these things for fast prototyping

maartenbreddels3• 2 years ago

We plan to support fastHTML at https://py.cafe/

This also uses pyodide, but supports more frameworks out of the box.

SillyUsername• 2 years ago

Someone just invented a whole new level of hell for devs who maintain code.

First it was untrained consultants and VB or Delphi (Pascal)

Then came the JS monkeys mixing up plain JS with jQuery and SQL injections.

Now it's time for data scientists and pi/sketch users to feel the pain of an uncharted domain...

micahdeath3• 2 years ago

If you could write VB (VB6) in WASM, that would make some things so much simpler!!! (I work on a legacy codebase)

v3ss0n7• 2 years ago

Thats mean you want to embed VB code into Browser Like in ActiveX days?

nazgulsenpai• 2 years ago

Oh man that would be so cool. Kinda like the Ruffle Flash player!

pwang2• 2 years ago

Anaconda Code is what you're looking for! It's Python (via PyScript) running as an Excel plug-in, that has full access to the spreadsheet and can harness a big part of the core PyData stack (including matplotlib, sklearn, pandas, etc.)

The whole thing runs via PyScript/WASM, and lives locally inside the Excel spreadsheet. https://www.anaconda.com/blog/introducing-anaconda-code-add-...

sitkack• 2 years ago

Arguably, VB6 and Ruby have a pretty similar syntax. And Wasm is first class in the Ruby build farm. https://github.com/ruby/ruby.wasm

v3ss0n7• 2 years ago

Thats what I am thinking too. Integrating code of DS/ML people into backend is painful enonugh. Imagine maintaining frontend code of those who had never done proper forntend development...

bob020202• 2 years ago

If it's not something that needs extensive testing, I'd rather maintain that codebase than a "proper" one. Data science people don't pump out 100 files with 20 layers of OOP, and they don't know how to use Redux or whatever overkill navigation lib. It'll be a main.py that just does what you want. Maybe there will be copy-pasted code, but even that can be more readable sometimes.

giancarlostoro6• 2 years ago

Honestly, WebAssembly with C#'s Blazor is the best development experience I've ever had. I can fully debug the front-end and back-end within Visual Studio.

maleldil2• 2 years ago

But then you have to use Visual Studio.

pjmlp8• 2 years ago

The 2nd coming of Web Forms, or Silverlight, take your pick.

bouncing8• 2 years ago

I'm curious what widgets/frontend tooling you use.

This is, I assume, Visual Studio for Windows. Have you tried it at all in VS Code or is that a non-starter?

pdntspa• 2 years ago

Everyday We Stray Further From God

bdcravens• 2 years ago

Reminds me of my first "tech" job (computer store/ISP/web dev shop, circa 1998) where the owner wrote some VBScript for the browser and wondered why it didn't work in Netscape.

pitah1• 2 years ago

I recently went down the rabbit hole of using PyScript for running a Python CLI app in the browser.

It felt hacky the whole time, especially when dependencies were involved. I had to create wrapper classes to work around Pydantic 2.x not being available to use. I tried to put all logic into the Python files but found some things missing that I had to put in JavaScript.

I think it could be good in use cases where you want some simple UI with custom UI logic on top of your Python code but maybe Streamlit or Gradio could be more suitable.

GitHub repo: https://github.com/data-catering/data-contract-playground

Website: https://data-catering.github.io/data-contract-playground/

skeledrew3• 2 years ago

The Rustification of a lot of Python projects is making it more difficult that necessary to use Python everywhere.

raybb• 2 years ago

The big limitation that's very annoying with any WASM setup is that at the end of the day you still can't call many APIs or scrape sites because of CORS. Ofcourse, CORS is important to avoid XSS and the like but I wish there was a way to deal with this other than setting up a proxy to strip CORS, which then leaves you with a non residential IP that's more likely to get blocked.

dsp_person• 2 years ago

Is this only an issue with cross-origin isolation enabled with COOP and COEP?

deknos2• 2 years ago

What i would like, if i could write scripts in firefox, which act the browser, like doing the evaluation at any stage i like. At GET the page, after ALL GETs. After javascript evaluation or before.

Is there something which can do this? and with full power of python also accessible to the host?

beardog2• 2 years ago

Would selenium Python bindings meet your needs? https://www.selenium.dev/documentation/

deknos2• 2 years ago

Does this work with Firefox?

grej• 2 years ago

Also check out pyscript.com, to create and host PyScript apps.

Falimonda• 2 years ago

Does something built off this or Pyodide exist that's effectively a replacement to using React?

bityard• 2 years ago

Why does it require signing in just to try it out? Someone else below mentioned that it's just adding a <script> tag to your HTML.

jedberg• 2 years ago

First thing I tried was a small lambda function and it worked! Then I tried some Fibonacci with tail recursion and surprisingly that worked too. I'm impressed, because often when people reimplement the Python interpreter they get those wrong.

tusharsadhwani• 2 years ago

that's because it's not a reimplementation, it is cpython recompiled to wasm.

pxc• 2 years ago

Then I tried some Fibonacci with tail recursion and surprisingly that worked too. I'm impressed, because often when people reimplement the Python interpreter they get those wrong.

Huh? I thought Python didn't have TCO anyway. Guido had a whole blog post about why it supposedly doesn't belong in Python: https://neopythonic.blogspot.com/2009/04/tail-recursion-elim...

nickpsecurity• 2 years ago

For those exploring, here was one of the best “Python in the browser” projects I found:

https://brython.info/

n8henrie• 2 years ago

I tried to write a POC Firefox extension in pyscript but ended up having to fall back to pyodide. Was a fun experiment anyway.

https://n8henrie.com/2023/06/write-a-firefox-extension-in-py...

skeledrew3• 2 years ago

I've been seeking to do this for a very long time!

apples2apples• 2 years ago

Careful Anaconda will change the license on you and then sue...

pwang2• 2 years ago

Fun joke but Anaconda has a track record of creating OSS and then turning it over to community governance. This includes the conda tool itself, libraries like bokeh, dask, numba, jupyterlab, and many more. And while PyScript project governance isn't in NumFOCUS, all of the code is permissively-licensed BSD/MIT.

The commercial licenses for the products and commercial repository is what supports all of this OSS development work.

bouncing8• 2 years ago

If I may toot my own horn, I wrote a somewhat more opinionated, reactive, frontend framework using PyScript. It's inspired by Vue.js, a bit: https://puepy.dev

bilsbie• 2 years ago

How’s it work? Webassembly? Webile?

laffra• 2 years ago

Also, check out PySheets (https://pysheets.app), which leverages PyScript to run Python logic in a spreadsheet UI, which is written entirely in Python. The PySheets UI uses LTK (https://github.com/pyscript/ltk), a fully client-side UI rendering library for PyScript.

a10sshg• 2 years ago

This is from Anaconda and built on Pyodide:

PyScript is currently built on Pyodide, which is a “port of CPython to WebAssembly/Emscripten.” PyScript supports writing and running Python code in a browser.

Like conda I find the whole thing very confusing and slow, but I suppose it will be marketed to academics as "the thing to do web development with". It will also be soft-abandoned.

Just use Javascript, PHP or Scala like lichess.org, which is a professional website.

maartenbreddels3• 2 years ago

Also check out https://py.cafe/ (I work on this project)

It supports streamlit, dash, virzo and solara. Frameworks like shiny, gradio and panel are planned (maybe even fasthtml).

It's also really nice to integrate this into your documentation: https://mkdocs.py.cafe/

PyScript: An open source platform for Python in the browser

Related Stories