Building a Python Playground with React, Monaco Editor, Pyodide

A High-level architecture behind a browser-based Python playground and the libraries that make it possible.

The Goal To build a lightweight Python playground with the following capabilities

• Write Python code in a browser
• Execute Python without a backend
• Display output and errors
• Save programs locally
• Prevent the UI from freezing during execution

High-Level Architecture

+----------------------+
|      React UI        |
+----------+-----------+
           |
           v
+----------------------+
|    Monaco Editor     |
+----------------------+
           |
           v
+----------------------+
|     Web Worker       |
+----------------------+
           |
           v
+----------------------+
|       Pyodide        |
|   (Python Runtime)   |
+----------------------+
           |
           v
+----------------------+
|     Output Panel     |
+----------------------+

React: Building the User Interface React serves as the foundation of the application. It manages

• Editor state
• Program output
• Execution status
• Saved programs
• UI rendering

Monaco Editor: Bringing the VS Code Experience to the Browser Monaco Editor is the same editor that powers Visual Studio Code.

Instead of using a simple textarea, Monaco provides:

• Syntax highlighting
• Line numbers
• Auto indentation
• Bracket matching
• Code formatting capabilities

This gives users an IDE-like experience directly inside the browser.

Pyodide: Running Python with WebAssembly The most interesting part of the project is Pyodide. Pyodide is a Python runtime compiled to WebAssembly (WASM). Traditionally, executing Python code requires

Browser
   ↓
Backend Server
   ↓
Python Process

With Pyodide, the architecture becomes:

Browser
   ↓
Pyodide
   ↓
Python Execution

The Python interpreter itself runs inside the browser.

This means:

• No backend required
• No Python installation required
• Faster experimentation
• Reduced infrastructure costs

When a user clicks Run, the Python code is passed directly to Pyodide for execution.

Why Web Workers Are Important Executing arbitrary Python code on the main browser thread is dangerous. Consider

while True:
    pass

Running this directly would freeze the entire application.To prevent this, Python execution happens inside a dedicated Web Worker.

The architecture becomes:

Main Thread
    |
    +---- UI Rendering
    |
    +---- Web Worker
              |
              +---- Pyodide

Benefits:

• UI remains responsive
• Long-running tasks are isolated
• Workers can be terminated if execution exceeds limits

This is a common pattern used in browser-based code execution platforms.

Browser Storage with localStorage To persist user programs, we use localStorage. When users save a program

Save Button
      ↓
localStorage

When the application reloads

localStorage
      ↓
Saved Programs Table

This approach avoids the need for a backend database while still providing persistence across browser sessions.

Error Handling A good developer experience requires meaningful error messages. The playground handles

• Python syntax errors
• Runtime exceptions
• Pyodide initialization failures
• Storage failures
• Browser compatibility issues

For example:

print(name)

Produces:

NameError: name 'name' is not defined

instead of a generic failure message.

Source Code is available on GitHub: https://github.com/aishuarya/pythonplayground/tree/main

Explore the implementation, and use it as a starting point for your own browser-based coding playgrounds.