pyscript / pyscript Goto Github PK

Try PyScript: https://pyscript.com Examples: https://tinyurl.com/pyscript-examples Community: https://discord.gg/HxvBtukrg2

Home Page: https://pyscript.net/

License: Apache License 2.0

JavaScript 20.54% Python 66.71% Makefile 0.79% CSS 0.23% HTML 11.73%

python html javascript wasm

pyscript's Introduction

PyScript

What is PyScript

Summary

PyScript is a framework that allows users to create rich Python applications in the browser using HTML's interface and the power of Pyodide, MicroPython and WASM, and modern web technologies.

To get started see the Beginning PyScript tutorial.

For examples see here.

Other useful resources:

The official technical docs.
Our current Home Page on the web.
A free-to-use online editor for trying PyScript.
Our community Discord Channel, to keep in touch .

Every Tuesday at 15:30 UTC there is the PyScript Community Call on zoom, where we can talk about PyScript development in the open. Most of the maintainers regularly participate in the call, and everybody is welcome to join.

Every other Thursday at 16:00 UTC there is the PyScript FUN call: this is a call in which everybody is encouraged to show what they did with PyScript.

For more details on how to join the calls and up to date schedule, consult the official calendar:

Google calendar in UTC time;
iCal format.

Longer Version

PyScript is a meta project that aims to combine multiple open technologies into a framework that allows users to create sophisticated browser applications with Python. It integrates seamlessly with the way the DOM works in the browser and allows users to add Python logic in a way that feels natural both to web and Python developers.

Try PyScript

To try PyScript, import the appropriate pyscript files into the <head> tag of your html page:

<head>
    <link
        rel="stylesheet"
        href="https://pyscript.net/releases/2023.11.2/core.css"
    />
    <script
        type="module"
        src="https://pyscript.net/releases/2023.11.2/core.js"
    ></script>
</head>
<body>
    <script type="py" terminal>
        from pyscript import display
        display("Hello World!") # this goes to the DOM
        print("Hello terminal") # this goes to the terminal
    </script>
</body>

You can then use PyScript components in your html page. PyScript currently offers various ways of running Python code:

<script type="py">: can be used to define python code that is executable within the web page.
<script type="py" src="hello.py">: same as above, but the python source is fetched from the given URL.
<script type="py" terminal>: same as above, but also creates a terminal where to display stdout and stderr (e.g., the output of print()); input() does not work.
<script type="py" terminal worker>: run Python inside a web worker: the terminal is fully functional and input() works.
<py-script>: same as <script type="py">, but it is not recommended because if the code contains HTML tags, they could be parsed wrongly.
<script type="mpy">: same as above but use MicroPython instead of Python.

Check out the official docs for more detailed documentation.

How to Contribute

Read the contributing guide to learn about our development process, reporting bugs and improvements, creating issues and asking questions.

Check out the developing process documentation for more information on how to setup your development environment.

Governance

The PyScript organization governance is documented in a separate repository.

pyscript's People

Contributors

Stargazers

Watchers

Forkers

pplonski sardonic2 hsuyuming costrouc msaroufim mauromcarvalho cknoll ericmjl xen0byte hamid-abdellaoui mifardli sariohara joydeep75 ycomputer neotycoder roadlabs davincee stjordanis aldoc-jnr siddharth1india nksama githubari datalayer-externals saidctb hasnat elroypeter vishalsingh17 harupy kelvinthedrugger ardabck ma7dev jurjsorinliviu jincute grimdeathr kantarin bragattemas marknote yassinejabori sukruozan mng-dev-ai xtnctx coldseattle dilshad-18 traveldwindling michelml rohittechzone willingc gbrezeanu realprogrammersusevim sciai-ai yibudak rmyers javierluraschi yatharth9 xnuvers007 gdn0101 srivari07 eddybuilds tsheoran-anacap knowledgecluster katzkawai tiago-peres luisricardo2825 zouhirsarrar cschin rvrsh3ll santiago-paz felipeescallon jessiepremia sayantikabanik asnramos wanjohichristopher bishwas-py technocannon1337 jsiegle matdmiller hakatom castasint kouke0638 webclinic017 dev-gazer materialisticmaterialist mouhamedtec sincere32 anonc0der haja-fgabriel navaneeth-sharma dj328 georgioi laojiedong 1709-01 karen-pal veronikkaa oussama138 wodole lkapt tomwwolf see887777 eya223 ricardoprins

pyscript's Issues

Running the type() function inside the pyscript raises a JsException

eg:

>>> type([1, 2, 3])

JsException(PythonError: Traceback (most recent call last): File "", line 156, in write File "", line 116, in write File "", line 79, in format_mime File "", line 54, in eval_formatter TypeError: descriptor '__repr__' of 'list' object needs an argument )

This appears to occur both when trying running type() from the repl and when used inside a <py-script> tag

<py-script>
type('A')`
</py-script>

I can't seem to get PyScript to load.

This is the error:

Uncaught (in promise) ReferenceError: WebAssembly is not defined
    at abort (pyodide.asm.js:14:193482)
    at pyodide.asm.js:14:182734
    at pyodide.ts:285:9
    at Generator.next (<anonymous>)
    at fulfilled (tslib.es6.js:73:58)

I need help to get it to work.

Make a splash screen really, really easy to use

One of the friction points of pyscript and pyodide is that it takes time to load initially. Without some kind of loading indication this makes for a bad user experience.

It takes a bit of html, css or .javascript knowledge to present a loading indicator or splash screen. I would propose making a very easy to use splash screen while pyscript is loading.

User authentication and database connection secrets

Is it possible to have user authentication in HTML+py-script apps? Is it possible to keep secrets in the code for a database connection? I understand that all py-script code is on the client-side, how such things can be implemented?

A simple example of NumPy and user interaction

I found the given examples either not related to Data science directly, or too involved (in terms of front-end code) for data scientists who want to just run NumPy/Matplotlib code on the browser with simple user interactions with HTML widgets. So, I created a simple example of random variable generation (which is foundational for data science work anyway).

Here is the HTML hosted on my Github page. An awesome nod to the power of PyScript that we can run this kind of computation on a Github static page w/o a single line of JS code actually doing anything :-)

https://tirthajyoti.github.io/pyscript_random_gen.html

Can't view NumPy example from pyscript.net

While browsing the examples on pyscript.net, I have noticed that the Visualization of Mandelbrot, Julia and Newton sets with NumPy and HTML5 canvas doesn't work and the reason why seems to be because of wrong importing of palettes.py.

This issue was caused by the absolute path set rather than having it as a relative path in pyscriptjs/examples/numpy_canvas_fractals.html.

Before:

- paths:
  - /palettes.py
  - /fractals.py

After:

- paths:
  - palettes.py
  - fractals.py

I have noticed this issue occurs in different examples that's why most people couldn't view the examples from REPL or pyscript.net. I will make a PR for this.

Make it one liner

Make the <script defer src="https://pyscript.net/alpha/pyscript.js"></script> attach the CSS

Disable livereload

I'm loading both pyscript.css and pyscript.js locally:

<link rel="stylesheet" href="/pyscript.css" />
<script defer src="/pyscript.js"></script>

I get this error in the demo files:

enviroment loading... undefined
pyscript.js:2          GET http://localhost:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED
(anonymous) @ pyscript.js:2
(anonymous) @ pyscript.js:2
pyscript.js:887 creating pyodide runtime

Is livereload.js necessary? If not, how to disable it?

Thank you.

requests installed from .whl file will not work.

My Code:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <py-env>
        - './requests-2.27.1-py2.py3-none-any.whl'
    </py-env>
  </head>
  <body>
    <py-script>
import requests

resp = requests.get('http://httpbin.org/ip')
print(resp.text)
    </py-script>
  </body>
</html>

Here, requests-2.27.1-py2.py3-none-any.whl is downloaded from Pypi. But when I open this html, the exception raised and it says:

pandas please

It would be super great if pandas is included!

lxml package

Is lxml package installed with pyodide? Without it, I am having trouble reading HTML table into a Pandas DataFrame using pd.read_html method. I got this error,

ImportError: lxml not found, please install it

As you can imagine, in many use cases, Pandas must read an HTML table from a div section.

Initial Tests - Examples Test

We need to catch up on the big (embarrassing :P ) testing debt we currently have. I'd propose that, at the very minimum, we add a quick test that runs all the examples that verify that they load without errors.

This is a meaningful indicator that, at least, major features didn't break when we add changes.

cant use opencv-python?

- opencv-python

gives error in console, stating cant get pure python wheel:

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 286, in add_requirement
raise ValueError(
ValueError: Couldn't find a pure Python 3 wheel for 'opencv-python'. You can use micropip.install(..., keep_going=True) to get a list of all packages with missing wheels.

Add section about security in WASM to the FAQ

In security settings, through HTML injection, it would be possible to obtain information related to the host that has the py-script resources.

<html>
   <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   </head>
   <body>
      <py-script>
print("+-----------------------------------------+")
print('[+] PoC py-script')
print("+-----------------------------------------+")

import os
print("[+] Make dir and list")
os.mkdir('blueteam')
os.mkdir('poc')
os.mkdir('jhere')
os.listdir(os.getcwd())
      </py-script>
      <py-script>
print("+-----------------------------------------+")
print("[+] Print user loged")
print("+-----------------------------------------+")
os.getlogin()
      </py-script>
          <py-script>
print("+-----------------------------------------+")
print("[+] OS information")
print("+-----------------------------------------+")
os.uname()
          </py-script>
   </body>
</html>

Output:

+-----------------------------------------+
[+] PoC py-script
+-----------------------------------------+
[+] Make dir and list
['blueteam', 'poc', 'jhere']
+-----------------------------------------+
[+] Print user loged
+-----------------------------------------+
web_user
+-----------------------------------------+
[+] OS information
+-----------------------------------------+
posix.uname_result(sysname='Emscripten', nodename='emscripten', release='1.0', version='#1', machine='wasm32')

TypeError: pyodide.runPythonAsync is not a function at PyButton.eval (base.ts:160:36)

This works fine on one computer, but not another, both running chrome 101.

<py-button id="getscans" label="Load Scans">
    def on_click(evt):
        print('clicked!')
</button>

No requests?

Browser API and HTML5 API Interaction Support

Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces

Does the sentence above mean that in the future will be possible to interact with the Web Browser APIs and HTML5 APIs using PyScript?

If the answer to the sentence above is negative, do you have the intention to do something like that?

WebAudio - how to collaborate?

Hi PyScript, for the record I just want to say: brilliant idea. Should have been started 30 years ago :)

Anyone scratching their heads over WebAudio implementation? Anywhere on the roadmap? Is there a place where we can start these discussions? At least get to know the people and share some ideas and implementations? Discord? Slack?

Fix indentation mismatch

Lots of the tags doesn't work properly until adjusted for indentation, for example:

   <py-env>
         - matplotlib
         - numpy
   </py-env>

Won't work until adjusted the indentation like the following:

   <py-env>
- matplotlib
- numpy
   </py-env>

Which makes for a slightly harder to read code. Same goes with the <py-script> tag too.

Indentation error for multi-line `<py-script>` blocks

In the following example, pyscript is happy to automatically dedent one line, but only one line:

<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <h1>Demo of weird indentation error</h1>
    <div id="output"></div>
    <py-script output="output">
        print("Hello from indented line 1")
        print("Hello from indented line 2") # Comment out this line and it works
    </py-script>
</body>
</html>

Of course I can just fully-dedent all my code for now, but it would be nice if my editor's automatic indenting just worked 😄

[FEATURE] Multiple py-envs in a single html file

Assuming it's possible, having multiple, different, simultaneously available py-envs could be very useful. As an easy example, consider two interactive demonstrations of different major versions of the same library, illustrating a new feature or breaking change. Or different versions of Python showing performance improvements with runnable tests.

There could be a one-to-many relationship between <py-env> tags and other py-script tags that use them. The one-to-one case would still be the most common, so existing html files could work as-is. For the others, we could allow an optional id to connect the tags. E.g. <py-env id="foo"> could be used by name with both <py-script py-env="foo"> and <py-repl py-env="foo"> being present in the same html file, along with any additional groups like id="bar".

Add Sphinx docs for discoverability on RTD

Let's consider adding sphinx docs using myst on RTD so Pythonistas can more easily discover information.

Make it really easy to make to control the layout of output like height, width or responsiveness.

One of the things that makes applications hard a layouts. A simple thing like achieving responsiveness can be hard.

I can see that pyscript.write does not provide me anyway to control the layout of the value. I would like to have that including options for responsiveness.

For example in the below example there should be an easy way for the matplotlib figure to just scale to 100% of its container height and width (the mpl element).

<html>
  <head>
    <!-- The link to the pyscript files are to be replaced official files when they are available at a CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MarcSkovMadsen/awesome-pyscript@master/assets/pyscript/pyscript.css" />
    <script defer src="https://cdn.jsdelivr.net/gh/MarcSkovMadsen/awesome-pyscript@master/assets/pyscript/pyscript.js"></script>
    <py-env>
    - numpy
    - matplotlib
    </py-env>
  </head>
  <body>
    <h1>Let's plot random numbers</h1>
    <div id="plot" style="height:400px;width:100%;background:whitesmoke">...loading</div>
    <!-- output="plot" id="script-id" output-mode="replace" -->
<py-script>
import matplotlib.pyplot as plt
import numpy as np

x = np.random.randn(1000)
y = np.random.randn(1000)

fig, ax = plt.subplots()
ax.scatter(x, y)
pyscript.write('plot', fig)
</py-script>
    </body>
</html>

`<py-env>` ignores package extras in requirements spec

<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env>
        - hypothesis[cli]
    </py-env>
</head>
<body>
    <h1>Requires-extra Demo</h1>
    <py-script>
import hypothesis
from hypothesis.extra.ghostwriter import magic
    </py-script>
</body>
</html>

Requires extra Demo
JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 429, in eval_code .run(globals, locals) File "/lib/python3 .10/site-packages/_pyodide/_base.py", line 300, in run coroutine = eval(self.code, globals, locals) File "", line 2, in File "/lib/python3.10/site-packages/hypothesis/extra/ghostwriter.py", line 98, in import black ModuleNotFoundError: No module named 'black' )

The [cli] extra on hypothesis adds a dependency on Black, but this is not picked up by pyscript. See also https://pip.pypa.io/en/stable/cli/pip_install/#requirement-specifiers and https://peps.python.org/pep-0508/#extras

Argument of type 'ChildNode' is not assignable

Installed via instructions on the Examples page: https://github.com/pyscript/pyscript/blob/main/pyscriptjs/README.md

(!) Plugin typescript: @rollup/plugin-typescript TS2345: Argument of type 'ChildNode' is not assignable to parameter of type 'HTMLElement'.                  
  Type 'ChildNode' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 223 more.                
src/components/pybox.ts: (57:24)                                                                                                                             
                                                                                                                                                             
57             addClasses(node, [width, 'mx-1'])

Node version 16.15.0.

Please ad a Label to the Edit Field and Text to the Run Button in the py-repl Component

Hello,
I'm a screen reader user and noticed that the py-repl component is missing text in its button component for run. There is the multiline text field for typing code (that should also have a <label> element, then there is an empty <button></button> tag with some CSS to show the run command.

Visit: the blog post with an example
Select all on the page and copy, then paste into a text editor
Find the text: "such as <py-script> and <py-env>."
Observe that between the above text and "Since we already loaded pandas and numpy", there are just blank spaces. This is pretty much how it looks to a screen reader user.

To fix this, please add a label to the multiline input field saying something like: "Python Script Area" and text to the run button saying something like: "Run".

Dom selectors

What about dom selectors?

GitHub Pages deployment error

When deploying the pyscript html to GitHub Pages, I got the following error. Any advice?

https://github.com/giswqs/pyscript-demo/blob/master/folium.html

github-pages 226 | Error: No such file or directory @ rb_check_realpath_internal - /github/workspace/priviate/toga/static/pyscript

https://github.com/giswqs/pyscript-demo/runs/6244144855?check_suite_focus=true#step:4:70

[!] Error: Cannot find module 'rollup-plugin-svelte'

node : v17.9.0
npm: 8.5.5

I have installed the rollup-plugin-svelte, why got this error when I run the npm run dev

Problem loading multiple packages in py-env

When I have a single package name inside py-env tags, my script works. But more than one, and it cannot load anything and throws out exceptions.

This works,

...
<py-env>
- matplotlib
</py-env>
  </head>

But,

...
<py-env>
- matplotlib
- pandas
</py-env>
  </head>

gives,

JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 429, in eval_code .run(globals, locals) File "/lib/python3.10/site-packages/_pyodide/_base.py", line 300, in run coroutine = eval(self.code, globals, locals) File "", line 1, in ModuleNotFoundError: No module named 'matplotlib' )

Loading py-script deferred

This script will load py-script properly

<html>
  <body>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <script>
      var pyscript = document.createElement('py-script');

      pyscript.innerHTML = `
from datetime import datetime
now = datetime.now()

now.strftime("%m/%d/%Y %H:%M:%S")
      `
      document.body.appendChild(pyscript);
    </script>
  </body>
</html>

However, this won't load

<html>
  <body>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <script>
      setTimeout(function() {
        var pyscript = document.createElement('py-script');

        pyscript.innerHTML = `
from datetime import datetime
now = datetime.now()

now.strftime("%m/%d/%Y %H:%M:%S")
        `
        document.body.appendChild(pyscript);
      }, 5000)
    </script>
  </body>
</html>

The document won't render, but it seems like the py-script is being processed since the tag has been partially expanded into:

<py-script id="PyScript-7ce3dac1-7e77-eca6-81a0-6a387f9aa644">
  <div class="parentBox flex flex-col mx-8">
    <div id="PyScript-7ce3dac1-7e77-eca6-81a0-6a387f9aa644"></div>
  </div>
</py-script>

Any suggestions or workarounds to make the `py-script` work with `setTimeout()`?

Importing a new package that doesn't exist in `Pyodide`

I have been trying to look into ways to import torch but I couldn't manage to do so because it isn't in Pyodide's list of supported packages.

From my research on this, there are two ways to have any new package be utilized:

Find a pure Python 3 wheel which means the package could be installed without the need of hard specifications.
Add torch and its dependencies to Pyodide's list of support packages. This will require doing the following:
1. Obtaining `Source Distribution of the package.
2. Compiling the package locally.
3. Building Pyodide from the source.
4. Add the package to Pyodide's list of supported packages by following the documentation
5. Importing the newer version of Pyodide to Pyscript I don't know how this can be done

Questions:

How can I add a newer version of Pyodide which was built locally to Pyscript?
Isn't there a way to import a python environment that has all of the packages already installed?
Why do we need to have pure Python 3 wheel (aka needs to be compiled on all hardware)? Is it because it is actually being compiled on the browser-side which should be able to run all hardware?
From looking into the logs, it seems that every time the page has loaded the packages listed to be used get installed by micropip, is this correct? If yes, why can't we store already installed packages to load them?
Why PyScript is super slow? I am assuming this because of the installation of packages from scratch (if my assumption is true).

Relevant resource:

Files missing from fresh installation

Following the instructions showing on the website, I download the ziped file and unzip, only to found that that the following files are missing:

pyscript.css
pyscript.js

The REPL demo is either broken or extremely confusing

I cloned the repo, followed the instructions in the README and started npm run dev, then I opened http://localhost:8080/repl.html and I things got confusing:

being a REPL, I expected commands to be executed when I press "enter" but it seems not. I also tried CTRL-enter, but it does the same.

Then I realized that if I hover the mouse on the REPL, two buttons appears, but they are barely visible because they are rendered outside the top margin:

The blue gear button doesn't do anything (I think).

The green play button seems to do what I expected to happen by pressing ENTER, but it took a while to realize that.

Please provide an installation process that will work for pythonistas

I know of experience that a lot of pythonistas don't know about node js etc. And that for example in an enterprise environment it can be very hard to get installed for pythonistas unless you realise that it can be installed via conda.

Please provide installation instructions that a newbee pythonista would be able to follow based on a basic familiarity with python tools and terminology.

How to open a file inside <py-script>?

Opening a file with open(filename) function throws FileNotFound Error.

app/
 - index.html
 - abc.txt
 - app.css

Inside the index.html file if we try to open the abc.txt file using <py-script> open("abc.txt","r") </py-script> throws a FileNotFound Error.

Make it easy to display "loading" information

Perceived speed of #dataapps is key. A user gets annoyed, uncertain and might leave your framework behind if the #dataapps seems stuck. I.e. when there is no indication of activity and the browser might even not be reacting. Its a bad user experience.

An example of a bad user experience is the panel_kmeans app loading experience.

Please make it very, very easy (or automatic) to display loading info to the user while pyscript.js, pyodide and python libraries are loading.

Add docs on how to access HTML elements from PyScript

Original question: Trying to move some of the JavaScripts to pyscript, its there a way to of something like this in pyscript now?

var metas = document.getElementsByTagName('meta');

There is! There are some examples in this very issue.
Adding docs for it would be very easy =)
I think it probably fits under the "How to" or the "Reference session", maybe?
Depending on how the person who chooses to tackle this one decides to go about it.
Probably easier to add it on the "how to" though because I think @tedpatrick has specific ideas on how the reference should go.

In case you need help for this, please let me know!
We have docs on how to contribute to the docs, but maybe they're not so clear.
Thank you!

Add documentation/examples on how to integrate PyScript with JavaScript frameworks/Import libraries within .js scripts using require

Is it possible to add the pyscript tags to JavaScript front end frameworks such as Vue?
Also, it is possible to import python libraries within a .js script, by using require('pyscript-js') function, or is it a feature that currently only works within html tags?

Clear example of external CSV or JSON file read

It would be great to have a clear, short example of an external CSV or JSON file read using open_url or pyfetch and process it through some numerical routines like NumPy or Pandas. This will be bread and butter for data science folks.

When using `print(arg1, arg2)` the output shows up on separate lines

This is an inconsistency from the behavior of the regular Python interpreter.
For example, in a regular Python interpreter, this will be the result of
print("Hello", "world"):

The following is the equivalent using pyscript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>PyScript Hello World</title>

    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="https://pyscript.net/unstable/pyscript.css" />
    
    <script defer src="https://pyscript.net/unstable/pyscript.js"></script>
  </head>

  <body>
    <py-env>
    </py-env>
    <py-script output="out">
print("Hello", "world")
    </py-script>
    <div id="out"></div>
  </body>
</html>

This shows up in the HTML as:

This is because every argument is output to a separate div element in the HTML:

This will make Python output from code that expects it to be compact to spread out across multiple lines.

Thanks to @khorn for his help with coming up with a reproducible example and writing it up.

Source maps don't work correctly

It's pretty hard to debug anything in a web browser with the current state of source maps. Some lines can't have breakpoints, some lines are skipped during stepping and some variables' names aren't mapped correctly.

The bokeh demo is broken

This is what I get on my machine, it looks suspiciously empty:

By looking at the code, I seem to understand that there should be a plot.
I looked inside the JS console but couldn't see any error message.

Share a similar vision project: Lively

pyscript is an exciting project, I was deeply touched by the vision described in the article:

create a new way of programming, building, sharing, and deploying applications.

make programming and the web a friendly and hackable place where anyone can create interesting things and still have fun.

The vision descriptions reminded me of Lively：

lively.next is a personal programming kit. It emphasizes liveness, directness and interactivity.

Lively is a project by Dan Ingalls who is a pioneer of object-oriented computer programming and the principal architect, designer and implementer of five generations of Smalltalk environments.

Smalltalk is also one of the spiritual origins of Scratch and they was created by the same group of people.

Since pyscript admires Scratch, it might also be able to learn from Lively's decade-long exploration, which is why I'm sharing Lively here.

I know pyscript and Lively are different, pyscript is mostly about Python, but they have a similar spiritual core about supporting the creative spirit of a single individual and providing fun.

Looking forward to the imaginative future of pyscript !

Add docs on how to interact with databases

Original question: I am trying to connect to MySQL server to visualize the data. But it shows the following error with pymysql library.

pymysql.err.OperationalError: (2003, "Can't connect to MySQL server on 'localhost' (timed out)")

I also tried to increase the timeout limit, but it didn't work.

@marimeireles edit: It's not possible to do that through the usual pathways, but we have walkarounds for it, see #129 (comment).

Please make pyscript.js available via CDN

In my context its much, much easier to use something like pyscript.js via a CDN than having to install and maintain node.js etc.

Furthermore the promise of web components and python in the browser is that you don't need all of the .js tooling.

Please provide pyscript.js via a CDN. Thanks.

Upload file to pyscript application

I currently have some applications created in plotly dash, but I saw this project and thought this could be leveraged instead.

This issue is sort of related to #111 :

Would it be possible to create a form and upload a CSV file to a pyscript application? Similar to Dash's upload component?

Example Scenario:

I have a CSV file that I want to read and produce graphs from:

Submit an HTML form to upload the CSV file to the pyscript application
Pyscript application produces graphs and returns graphs to a div