PyKidos: Python visual playground in the browser

Welcome to PyKidos, a small JavaScript application (still rough around the edges) that offers a Python playground for teaching purposes. It is mainly intended for use by adults who are teaching programming to their kids, and it is not really designed for independent use by children without adult supervision.

The grid cells (color and text) can be manipulated from Python. You can make simple grid animations and react to click and keyboard events.

Kids (and adults) can program toy games to learn basic Python coding skills.

Gallery

More screenshots to come soon (pull requests welcome).

Features

• Entirely client-side: the data is only stored in your browser (localStorage).
• Uses Pyodide, a CPython port to WebAssembly.
• Uses the ACE code editor.
• Unicode emoji picker and color picker.
• NumPy is supported (and potentially other scientific Python libraries; those will require a quick pull request at the moment though)
• Manipulate a grid (cell colors and text, including Unicode emojis) from Python.
• React to click and keyboard events in the grid.
• Animations.
• Download your Python scripts locally.
• Share your code by getting a URL with the entire code and data encoded in it (limited to a few kilobytes compressed).

Development notes

The code is written in custom HTML, CSS, vanilla JavaScript.

The code uses the following external components:

• ACE editor (code editor)
• Pyodide (CPython port to WebAssembly)
• Pako (gzip compression/decompression)
• emoji-picker-element (emoji selector)
• coloris (color picker)

To serve your own version, just statically serve this repository.

Feel free to open issues, ask questions, make suggestions, propose pull requests.

Credits and history

I wrote this small application in a few days to teach programming concepts to my 8-year-old boy (I couldn't find an existing web-based application so I couldn't help building my own).

A bare IPython terminal looked too boring to my son and he wanted a visual component. The grid looked like a simple option. Future versions could support alternative widgets, such as a canvas.