Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

europanite/client_side_python

License OS CI Frontend Tests via Docker Deploy Expo Web to GitHub Pages

React Native TypeScript Jest Expo

"web_ui"

PlayGround

A Browser-based Python Runner playground powered by Pyodide. Try Python code in your web browser. No server, No account, or No payment is required.


Overview

Client Side Python is a browser-based Python playground powered by Pyodide.
Python code runs inside your browser tab (WebAssembly, no backend).

This makes it useful for:

  • Quickly trying out small Python snippets
  • Demonstrating Python basics in a classroom or workshop
  • Experimenting with simple numeric or scripting tasks in a safe sandbox
  • Showing how WebAssembly + Pyodide can bring "real" Python to the browser

Features

  • Fully client-side execution

    • Uses Pyodide to run CPython in WebAssembly.
    • No server, No database, No authentication required by default.
  • Simple code editor + console

    • Text area for Python code.
    • Console area that shows stdout and stderr.
    • Buttons: Run, Stop, Clear, Load Sample, Copy Output.
  • Responsive web UI

    • Built with Expo / React Native Web.
    • Layout adapts to different viewport sizes (desktop / tablet).
  • Deterministic CI via Docker

    • Jest tests run in a Docker container.

How It Works

On first load, the app:

  1. Fetches Pyodide from a CDN.
  2. Initializes the Pyodide runtime and exposes runPythonAsync.
  3. Attaches custom handlers for stdout and stderr so that Python output is streamed into the in-page console.
  4. Uses a simple execution token to implement a soft Stop:
    • Each run increments an internal execId.
    • If a run finishes with an outdated execId, its output is discarded.
    • This prevents stale results from older runs from polluting the console.

All of this happens in the browser, without any backend API calls.


πŸš€ Getting Started

1. Prerequisites

2. Build and start all services:

# set environment variables:
export REACT_NATIVE_PACKAGER_HOSTNAME=${YOUR_HOST}
# Build the image
docker compose build
# Run the container
docker compose up

3. Test:

docker compose \
-f docker-compose.test.yml up \
--build --exit-code-from \
frontend_test 

License

  • Apache License 2.0

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /