Build Your Own Online Python Playground

This challenge is to build your own online code playground where users can write and run Python code directly in their web browser.

An online code playground is a web-based environment where developers can experiment with code without needing to install anything on their computer. Think of it like a digital sandbox, you can write code, click a button, and see the results instantly. It's incredibly useful for learning, testing ideas quickly, or sharing code snippets with others.

The Challenge - Building Your Own Online Code Playground

You're going to build an online code playground for Python (or another programming language of your choice). Users will be able to write code in an editor, run it with the click of a button, and see the output or errors displayed immediately. Over several steps, you'll add features like saving code snippets, syntax highlighting, error messages with line numbers, and performance safeguards to keep the browser responsive.

Step Zero

Set up your development environment and get familiar with the technologies you'll be using.

You'll need to choose a tech stack that works well for building web applications with a rich code editor. You'll be using a Python WebAssembly runtime (like Pyodide or PyScript) to execute Python code in the browser, so make sure you understand how it works before you begin.

Step 1

In this step, your goal is to execute Python code in the browser and display the output to the user.

You'll create a simple HTML page with a code editor (a basic textarea is fine for now) and a "Run" button. When the user clicks the button, take the code from the editor, send it to the Python WASM runtime, and display whatever the code prints to standard output in an output panel below.

Testing: Write a simple Python script that prints "Hello, World!" and verify it displays correctly. Try a few more examples: print multiple lines, do some math (print(2 + 2)), and test with variables.

Step 2

In this step, your goal is to catch and display Python errors in a user-friendly way.

When code fails to run (syntax errors, runtime errors, etc.), the user should see a clear error message that tells them what went wrong and where. Include the line number and the error traceback so they can debug their code.

Testing: Deliberately write broken code, missing colons, undefined variables, division by zero, and verify that each error is clearly shown with line numbers and helpful messages.

Step 3

In this step, your goal is to replace the basic textarea with a proper code editor that highlights Python syntax.

Your users will write code more efficiently and catch mistakes faster if the syntax is color-coded. You can use an existing code editor library (like CodeMirror or Monaco Editor). The editor should support undo/redo, copy/paste, and basic keyboard shortcuts.

Testing: Type Python code into the editor and verify that keywords (like def, if, for) appear in different colours. Test undo/redo, and make sure basic shortcuts like Ctrl+Z or Cmd+Z work.

Step 4

In this step, your goal is to let users save their code snippets to the browser's local storage and load them again later.

Users should be able to save their current code with a name, see a list of their saved snippets, and load any snippet back into the editor. They should also be able to delete saved snippets they no longer need.

Testing: Write some code, save it with a descriptive name, close the browser tab (or reload the page), and verify the code is still there when you come back. Create multiple snippets and switch between them.

Step 5

In this step, your goal is to prevent long-running code from freezing the browser and provide users with feedback about what's happening.

Add a timeout for code execution—if code takes too long to run, stop it and show a message. Display a loading indicator while code is executing. Optionally, show memory usage warnings if code is consuming too much resources.

Testing: Write code that runs for a long time (like an infinite loop or a deep recursion). Verify it stops after a reasonable timeout and the user sees a clear message. Test that the loading indicator appears and disappears at the right times.

Step 6

In this step, your goal is to handle edge cases gracefully so your playground doesn't break.

Handle situations where the Python WASM runtime fails to initialise, the browser doesn't support WebAssembly, or the user's browser runs out of localStorage space. Show helpful messages in each case so users know what's happening.

Testing: Try disabling WebAssembly in your browser to test the fallback message. Fill up localStorage and try to save a large code snippet, and verify a clear error message appears.

Going Further

Once you've built the basic playground, consider adding more advanced features:

• Autocomplete and code hints - Help users discover Python functions and methods as they type
• Multiple files - Let users create projects with multiple Python files
• Import libraries - Allow users to import common Python libraries (many are available in Pyodide)
• Share snippets - Generate a link that someone else can click to load and run your code
• Dark mode - Add a theme toggle so users can write code comfortably at night
• Keyboard shortcuts guide - Show users what shortcuts are available

Help Others by Sharing Your Solutions!

If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know - ping me a message on the Discord Server, via Twitter or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo.

Get The Challenges By Email

If you would like to receive the coding challenges by email, you can subscribe to the weekly newsletter on SubStack here: