Run Python in the browser using WASM

This project is a simple way to run Python in the browser using WASM. You can embed this editor in any page, blog post, or web application where it supports using iframe tags.

The following technologies are used to build this project:

How it works

You can use the following parameters in the URL to set up the editor:

  • height: sets the height of the editor, default is 100%. for example height=100%
  • width: sets the width of the editor, default is 100%. for example width=100%
  • theme: sets the theme of the editor (light or dark), default is dark. for example theme=light
  • lang: sets the language of the editor. The editor support python, javascript, css, html, xml, markdown, cpp, json, sql and run. Default language is python. for example lang=python
  • url: This parameters should be raw url of a Github file. We load the code from this URL to the editor. The editor by itself is stateless so you need to use this parameter to populate the editor with some code. for example url=https://raw.githubusercontent.com/amirtds/python-examples/main/replace.py
  • editable by default is true which means users can edit the code. You can set this parameter to false to disable editing. for example editable=false

Example

Let's say we want to embed a file from Github to our page and let the users to run the code in the file in their browser. We want dark theme and let users to edit the code if the want to. So the URL will look like this:

https://wasmeditor.com/?theme=dark&lang=python&url=https://raw.githubusercontent.com/amirtds/python-examples/main/replace.py&editable=true

Enter above URL in your browser and you will see the editor.

The iframe tag will look like this:

<iframe src="https://wasmeditor.com/?theme=dark&lang=python&url=https://raw.githubusercontent.com/amirtds/python-examples/main/replace.py&editable=true" width="100%" height="800" frameborder="0"></iframe>