I Created a Python Code Playground

I created a Python Code Playground that allows you to execute Python code in a web browser.

Technically, it uses Pyodide and Monaco Editor, and was created with the help of GitHub Copilot.
(Recent LLMs are very convenient as they can generate working code just by describing what you want to do.)

Motivation

I created this tool because I thought it would be convenient to have an easy-to-use execution environment when writing Python-related articles on this blog.

While browser-based Python execution environments such as JupyterLite (a lightweight version of JupyterLab) exist, I couldn’t find one that was easy to embed, so I created my own.

Main Features

1. Package Installation

   • You can add packages pre-installed in Pyodide.
     (Examples: numpy, matplotlib, gensim, openai, pandas, polars, scikit-learn, …)
   • You can also install packages from PyPI.
     (Limited to packages that can be installed on Pyodide, such as pure Python packages)
   • Installed packages are displayed in the status bar at the bottom of the screen.

2. File Upload Functionality

   • You can load files from local storage or URLs and upload them to the execution environment.
   • For example, you can load CSV files and perform data analysis using pandas.

3. Script Loading Functionality

   • You can load Python scripts from local storage or URLs and display them in the editor.
   • By adding codeUrl=<url> to the URL parameters, you can display code from a specified URL in the editor.

4. URL Sharing Functionality

   • You can share URLs that record code, installed packages, and other settings.
     Opening the same URL allows others to run and test the program.

5. Detailed Execution Environment Settings

   • By default, the Python execution environment is preloaded at startup to reduce the time from pressing the execute button to displaying results.
   • To keep operation lightweight, the environment is carried over between executions by default rather than being reset each time,
     but you can also enable automatic reset for each execution.

6. Rich Text Editor with Syntax Highlighting and Code Completion

   • The editor is feature-rich as it uses Monaco Editor.

7. Inline Mode for Blog Post Embedding

   • Set mode=inline for full-screen display of the editor + execution result window in inline mode.
   • Using this mode, you can easily embed Python execution environments as shown below:

8. Support for Matplotlib Graph Display

   • There is basic support for displaying Matplotlib graphs.
     The implementation is somewhat hacky, so it may not work correctly in all cases.
     (For more robust integration, @jupyterlab/outputarea would be a better choice)

Button Introduction

• Run Button
  • Executes the entered code. The execution results are displayed in the console window.
• Reset Button
  • Reset the Python execution environment (Pyodide).
• Layout Switch Button
  • Toggles the layout of the code editor and execution results between vertical/horizontal split.
• File Button
  • Load Script
    • Loads a script file from local storage into the editor
  • Load Script (URL)
    • Loads code from a specified URL into the editor
  • Export Script
    • Saves the code in the editor to local storage
  • Copy Sharing URL
    • Copies a URL that records the code content, installed packages, and other settings
  • Upload Data
    • Uploads data files for use in programs
• Settings Button
  • Code Completion
    • Enables code completion in the editor
  • Accept Suggesion on Enter
    • Confirms completion suggestions with the Enter key
  • Line Numbers
    • Displays line numbers in the editor
  • Reset Environment on Each Execution
    • Reset the execution environment (Pyodide) after each code execution
      (Without reset, variable information etc. is carried over)
  • Skip initialization at startup
    • By default, the app preloads the execution environment at startup,
      turning on this setting disables that behavior
  • Theme
    • Choose from three themes: System, Dark, or Light
  • Font Size
    • Sets the font size in the editor
  • Tab Size
    • Sets the indentation size
  • Layout
    • Sets the position relationship between the code editor window and execution result window
  • Install Package
    • Installs Python packages
  • Reset to Defaults
    • Resets all settings to default