Run Python code directly in the browser.

Eli Lamb

Last update: Dec 31, 2022

Related tags

Overview

Run Python code directly in the browser. Try it out!

Quickstart

Install react-py with:

npm i react-py

Then, wrap your app in a PythonProvider component.

import { PythonProvider } from "react-py";

function App() {
  return (
    // Add the provider to your app
    <PythonProvider>
      <Codeblock />
    </PythonProvider>
  );
}

render(<App />, document.getElementById("root"));

Using the usePython hook, you can run code and access both stdout and stderr. For full usage instructions, see the usage docs.

Documentation

For full documentation, visit elilambnz.github.io/react-py.

Examples

Basic example

Limitations

Most of the Python standard library is functional, except from some modules. The following modules can be imported, but are not functional due to the limitations of the WebAssembly VM:

multiprocessing
threading
sockets

Learn more about the limitations here.

Roadmap

Add additional examples
Ability to run python in Web Workers
Extended API for custom configuration

License

react-py is available under the MIT License.

Contact

Eli Lamb - elilambnz
James Ansley - James-Ansley

Acknowledgments

This project is heavily based on Pyodide, a Python distribution for the browser and Node.js based on WebAssembly.

Comments

Add installation of custom packages

I want to be able to install custom packages using micropip. Locally I've got this working (hardcoded, with some hacks...). Bear in mind that web-dev is not my strongsuit but I'm really trying to get good over the next few weeks. Here's my local python-worker.js file:

importScripts("https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js");

import { expose } from "comlink";

const python = {
  async init(id, stdout, onLoad) {
    self.pyodide = await loadPyodide({
      stdout: (msg) => stdout(id, msg),
    });
    await pyodide.loadPackage("micropip");
    const micropip = pyodide.pyimport("micropip");
    await micropip.install('sf-hamilton');
    onLoad(self.pyodide.version);
  },
  async run(code) {
    await self.pyodide.runPythonAsync(code);
  },
};

expose(python);

Re: API, I think the cleanest way might be to provide this as an argument to the PythonProvider?

<PythonProvider
    pip_install={['sf-hamilton']}> 
    <App>...</App>
</PythonProvider>

Happy to help out -- should be pretty easy to implement, just have to wrap my head around the worker abstraction.

On a side-note, any reason python-worker isn't in TS?

enhancement

opened by elijahbenizzy 7

Support file-system access

For my use-case (would be curious how generalized it is) -- I need to mess with the virtual file system. Basically I have one editor that creates a module and the other that runs it -- see screen-capture below.

I've currently got it running by using pyodide + react providers (sans react-py), but I really like the abstraction you have and owuld be excited to integrate. Its easy with the FS API -- perhaps this could be given with the provider? https://pyodide.org/en/stable/usage/api/js-api.html?highlight=fs#pyodide.FS.
enhancement

opened by elijahbenizzy 4
Ship source files in NPM package

Right now the npm package only contains the dist directory, with *.js.map files referencing the non-existing ../src/*.ts paths. This causes builders that care about sourcemaps, such as Parcel, to error out with ENOENT while looking for original ts files.

For comparison, react-monaco-editor ships 2 directories: lib (compiled JS + maps) and src, with main in package.json set to lib/index.js.

After manually removing all .map files, the error disappears.
bug

opened by atiluj 1
Can you plot using matplotlib/plotly?

I really love this project (not a web-developer myself but I want to start building something with it). I was just wondering if you can plot using matplotlib or something similar like plotly which is more web based.
question

opened by YoniChechik 1
chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.46.1 to 5.47.0
Bumps @typescript-eslint/eslint-plugin from 5.46.1 to 5.47.0.

Release notes

Sourced from @typescript-eslint/eslint-plugin's releases.

v5.47.0

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

Changelog

Sourced from @typescript-eslint/eslint-plugin's changelog.

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

Commits

a2c08ba chore: publish v5.47.0

9e35ef9 feat(eslint-plugin): [no-floating-promises] add suggestion fixer to add an 'a...

6b3ed1d docs: fixed typo "foo.property" (#6180)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
chore(deps-dev): bump @types/mocha from 9.1.1 to 10.0.0
Bumps @types/mocha from 9.1.1 to 10.0.0.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
chore(deps): bump json5 from 2.2.1 to 2.2.2 in /website
Bumps json5 from 2.2.1 to 2.2.2.

Release notes

Sourced from json5's releases.

v2.2.2

Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

Changelog

Sourced from json5's changelog.

v2.2.2 [code, diff]

Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

Commits

14f8cb1 2.2.2

10cc7ca docs: update CHANGELOG for v2.2.2

7774c10 fix: add proto to objects and arrays

edde30a Readme: slight tweak to intro

97286f8 Improve example in readme

d720b4f Improve readme (e.g. explain JSON5 better!) (#291)

910ce25 docs: fix spelling of Aseem

2aab4dd test: require tap as t in cli tests

6d42686 test: remove mocha syntax from tests

4798b9d docs: update installation and usage for modules

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
chore(deps-dev): bump @types/node from 18.11.17 to 18.11.18
Bumps @types/node from 18.11.17 to 18.11.18.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
chore(deps-dev): bump @typescript-eslint/parser from 5.47.0 to 5.47.1
Bumps @typescript-eslint/parser from 5.47.0 to 5.47.1.

Release notes

Sourced from @typescript-eslint/parser's releases.

v5.47.1

5.47.1 (2022-12-26)

Bug Fixes

ast-spec: correct some incorrect ast types (#6257) (0f3f645)

eslint-plugin: [member-ordering] correctly invert optionalityOrder (#6256) (ccd45d4)

Changelog

Sourced from @typescript-eslint/parser's changelog.

5.47.1 (2022-12-26)

Note: Version bump only for package @typescript-eslint/parser

Commits

6ffce79 chore: publish v5.47.1

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.46.1 to 5.47.1
Bumps @typescript-eslint/eslint-plugin from 5.46.1 to 5.47.1.

Release notes

Sourced from @typescript-eslint/eslint-plugin's releases.

v5.47.1

5.47.1 (2022-12-26)

Bug Fixes

ast-spec: correct some incorrect ast types (#6257) (0f3f645)

eslint-plugin: [member-ordering] correctly invert optionalityOrder (#6256) (ccd45d4)

v5.47.0

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

Changelog

Sourced from @typescript-eslint/eslint-plugin's changelog.

5.47.1 (2022-12-26)

Bug Fixes

ast-spec: correct some incorrect ast types (#6257) (0f3f645)

eslint-plugin: [member-ordering] correctly invert optionalityOrder (#6256) (ccd45d4)

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

Commits

6ffce79 chore: publish v5.47.1

0f3f645 fix(ast-spec): correct some incorrect ast types (#6257)

ccd45d4 fix(eslint-plugin): [member-ordering] correctly invert optionalityOrder (#6256)

a2c08ba chore: publish v5.47.0

9e35ef9 feat(eslint-plugin): [no-floating-promises] add suggestion fixer to add an 'a...

6b3ed1d docs: fixed typo "foo.property" (#6180)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
chore(deps-dev): bump @typescript-eslint/parser from 5.46.1 to 5.47.0
Bumps @typescript-eslint/parser from 5.46.1 to 5.47.0.

Release notes

Sourced from @typescript-eslint/parser's releases.

v5.47.0

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

Changelog

Sourced from @typescript-eslint/parser's changelog.

5.47.0 (2022-12-19)

Note: Version bump only for package @typescript-eslint/parser

Commits

a2c08ba chore: publish v5.47.0

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0

Web workers cannot have imports or exports without the `type: "module"` option.

When trying to use the module with Parcel, the compilation fails:

@parcel/transformer-js: Web workers cannot have imports or exports without the `type: "module"` option.

  proj/node_modules/react-py/dist/hooks/usePython.js:80:41
    79 |     var createWorker = function () {
  > 80 |         var worker = new Worker(new URL('../workers/python-worker', import.meta.url));
  >    |                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^ The environment was originally created here
    81 |         workerRef.current = worker;
    82 |     };

  💡 Add {type: 'module'} as a second argument to the Worker constructor.
  📝 Learn more: https://parceljs.org/languages/javascript/#classic-scripts

This is triggered by this import in worker.js:

import { expose } from 'comlink';

Replacing this line with these 2 makes the error go away:

importScripts('https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/comlink.min.js');
const expose = Comlink.expose;

According to this StackOverflow answer, the {type: 'module'} will soon be accepted by all modern browsers as the second parameter to new Worker(). A (better?) alternative is to configure the builder to inline the comlink dependency.

question

opened by atiluj 1

Run Python code directly in the browser.

Related tags

Overview

Quickstart

Documentation

Examples

Limitations

Roadmap

License

Contact

Acknowledgments

Comments

v5.47.0

5.47.0 (2022-12-19)

Features

5.47.0 (2022-12-19)

Features

v2.2.2

v2.2.2 [code, diff]

v5.47.1

5.47.1 (2022-12-26)

Bug Fixes

5.47.1 (2022-12-26)

v5.47.1

5.47.1 (2022-12-26)

Bug Fixes

v5.47.0

5.47.0 (2022-12-19)

Features

5.47.1 (2022-12-26)

Bug Fixes

5.47.0 (2022-12-19)

Features

v5.47.0

5.47.0 (2022-12-19)

Features

5.47.0 (2022-12-19)

Owner

Eli Lamb

The app's backend is written in Python (Flask) and for search it uses Elasticsearch. I used this app as candidate application for learning out how to build, run and deploy a multi-container environment (docker-compose).

ArchiveWeb.page Express offers high-fidelity web archiving directly in the browser

The full power of the Go Compiler directly in your browser, including a virtual file system implementation. Deployable as a static website.

Run a command, watch the filesystem, stop the process on file change and then run the command again...

Search your code and 2M+ public repositories on Sourcegraph directly within Raycast.

Write python code in Solid.js using Pyscript.

An obsidian plugin that allows code blocks executed interactively in sandbox like jupyter notebooks. Supported language rust、kotlin、python、Javascript、TypeScript etc.

High-quality QR Code generator library in Java, TypeScript/JavaScript, Python, Rust, C++, C.

JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

Post directly to your Steemit from Obsidian

A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment.

Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.

Obsidian jTab adds the ability to show guitar chords and tabs directly in your notes.

A large scale simulation which pits millions of space ships against each other in a virtual universe all running directly in SingleStore.

This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.