PyodideU: Unlocking Python Entirely in a Browser for CS1

Thomas Jefferson Chris Gregg Chris Piech

Stanford University Stanford University Stanford University
tjj@[Link] cgregg@[Link] piech@[Link]

ABSTRACT 1 INTRODUCTION
In this paper, we present an education-focused Python IDE and Browser based environments offer great benefits for both educators
runtime library which can run entirely in desktop, laptop, tablet, and learners of introductory programming. Often, setting up local
and mobile device web browsers. Our solution provides features integrated development environments (IDEs) can be a difficult task
useful for an engaging CS1 course, and eliminates the need for a for beginners and, at times, require a more advanced understanding
server-based runtime. We describe a new, open source, methodology than is available [24]. This problem can be especially pronounced
for running interactive Python entirely in the browser by solving in large CS1 courses, where custom instruction is difficult or not
the “WebAssembly blocking problem," a core technical challenge to possible. Alternatively, browser based IDEs offer an opportunity
a web-based Python solution. to present a uniform, low barrier to entry option to start writing
Because our method enables Python entirely in the browser, it code. Traditionally, web based environments meant for non web
unlocks many new features. For example, students can share their native programming languages, such as Python, have faced issues
code with others, without incurring extra costs to the instructors or regarding executing and interacting with user programs in a near
institutions. Other features include line by line code highlighting as native way.
a program executes, highly intuitive interactive graphics, mouse and In preparation for Code In Place [6, 26, 29], a large scale, online,
touch integration, and use of a wide selection of Python modules CS1 course, we wanted to develop a system that allowed users
such as Numpy and Pandas. Currently, our IDE has been used in 5 to run their code entirely in the browser. We also wanted to give
classes, covering more than 10,000 students and teachers, with over them access to commonly used Python libraries, an interactive
350,000 projects created. We found that students and instructors and easy to use graphics library with mouse and touch support,
appreciated the variety of tools and abilities the IDE made possible. and a debugging tool. It was a goal to design an interface that
We benchmark the performance of running code with our method implemented these features in a way that would be intuitive and
against other online Python solutions and we discuss the benefits comfortable for both beginners and teachers.
and additional possibilities that our method allows, such as mobile
device and/or offline code execution. We provide full free public 1.1 Approaches to Python in a Browser
access to our IDE and open source the core libraries which enable Currently, several solutions exist for running user written Python
the conversion of student written Python to WebAssembly. from the browser. The two most common include server based exe-
cution and transpilation to Javascript. While each of these systems
CCS CONCEPTS offer a subset of functionality, they each have a series of shortcom-
• Social and professional topics → CS1; Computer science ings that can negatively affect a user’s programming experience.
education; K-12 education; Model curricula; • Software and A server based solution sends user code to a remote computer
its engineering → Integrated and visual development envi- for the program to be run, then sends the results back for the
ronments. user to view. This system allows for running complex programs
and offers potential access to native Python features, like libraries.
KEYWORDS However, using a remote server increases the computational cost
Python, IDE, integrated development environment, web browser, of the system, and the difficulty for interactive programs. Some
webassembly, mobile, CS1 current solutions have integrated highly interactive programs using
web infrastructure like web sockets, but these services come at a
ACM Reference Format:
Thomas Jefferson, Chris Gregg, and Chris Piech. 2024. PyodideU: Unlock- cost, either to the user or the maintainer. Server reliance can also be
ing Python Entirely in a Browser for CS1. In Proceedings of the 55th ACM a major issue for accessibility, as the performance of any interactive
Technical Symposium on Computer Science Education V. 1 (SIGCSE 2024), programs, and the ability to run them can be highly dependent on
March 20–23, 2024, Portland, OR, USA. ACM, New York, NY, USA, 7 pages. the user’s internet access.
[Link] Another option is transpilation to Javascript. With this solution,
user code is transpiled from Python, to Javascript, then run directly
Permission to make digital or hard copies of all or part of this work for personal or
classroom use is granted without fee provided that copies are not made or distributed in the browser. Removing the server is helpful as there is no longer
for profit or commercial advantage and that copies bear this notice and the full citation a dependence on continued, uninterrupted internet access and com-
on the first page. Copyrights for components of this work owned by others than the munication. Transpilation, however, does not scale with the Python
author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or
republish, to post on servers or to redistribute to lists, requires prior specific permission ecosystem, and limits the user’s ability to use external packages.
and/or a fee. Request permissions from permissions@[Link]. Additionally, some of the most prominent and performant Python
SIGCSE ’24, March 20–23, 2024, Portland, OR to JS transpilers consistently have issues with blocking synchro-
© 2024 Copyright held by the owner/author(s). Publication rights licensed to ACM.
ACM ISBN 979-8-4007-0423-9/24/03. . . $15.00 nous user input. This issue manifests through bugs, like infinite
[Link] loops, crashing the user’s browser, and inability to use Python’s

583
SIGCSE ’24, March 20–23, 2024, Portland, OR Thomas Jefferson, Chris Gregg, & Chris Piech

native input function without blocking interaction with the rest have been developed for research and private use[32, 38]. A popu-
of the web page. Work-arounds, like running the user’s program in lar example includes the Scratch[27] environment introduced by
a web worker[14], exist to solve the infinite loop crashing problem, Maloney et al., which provides a specialized language and inter-
however these solutions come with trade-offs. For example, run- face built specifically for learning programming. While Scratch is a
ning the code in a web worker can negatively impact interactive major educational IDE, it, like many other options, doesn’t allow
program performance, and make accepting synchronous user text for programming in Python. Additionally, we also do not focus on
input impossible. native educational Python IDEs [16, 25] as these require at least
Finally, a newer option includes Python-to-WebAssembly inter- some download and setup. There are also several studies on web
pretation. WebAssembly is a low level, byte code instruction set based platforms built to run a plethora of languages for different
that can be run directly from a browser [22]. With this solution, University courses [17, 19, 36, 37]. These studies find that using a
user written Python can be interpreted and compiled to byte code. web based environment can have positive effects like decreasing
This allows for a fast runtime and increasingly scalable solution. dropout rates.
However, WebAssembly is known to be unblockable, and has some Within educational Python focused IDEs, there are several tools,
of the same issues as transpilation, including infinite loop crashing and IDEs that operate in the browser, either through transpilation
in the browser’s main thread, and no synchronous input. For this or server side execution, including Code Skulptor (used by Cours-
reason, it is difficult to use an unaltered Python-to-WebAssembly era) [4], and Strype [18] among others [20, 30, 35]. Some of these
provider like Pyodide[31] to run student code. implementations may solve some of the problems faced by web
Each of these solutions offer a subset of useful features for Python Python IDEs, but they each face the natural issues that transpila-
learning and education, but also come with trade-offs between scal- tion or server based systems provide that limit the scope of their
ability, cost, performance, and control. With the system we will functionality.
introduce in this paper, we can run performant Python, while re- We will focus on a subset of popular, interactive, browser based
maining entirely in the browser, and enabling synchronous user Python IDEs that are open to the public, used for education, and
interrupts using WebAssembly. This approach offers a new oppor- have very easy interfaces and libraries that students can quickly
tunity to provide a more full, native, and accessible experience to grasp the basics of. The most similar to ours include the Carnegie
students beginning their computer science journeys. Melon (CMU) CS Academy IDE [33], [Link] [11], and Online
Python Tutor [21]. Each of these solutions include either server-side
1.2 Main Contributions execution, or transpilation to Javascript.
The Replit platform offers a diverse set of languages to utilize.
In this paper, we present (1) a novel, open source, system designed
Their Python service runs user programs on a server-side back-end.
for running student written Python, entirely in the browser, (2)
When running an interactive program that requires user input, such
a sample IDE platform that displays the functionality (accessible
as live mouse location data for example, the application utilizes
at [Link] (3) the outcomes of using our system
web channels such as web sockets to convey the data. The platform
in several CS1 courses that collectively reached over 10,000 stu-
also caps the compute power of free accounts, and requires a paid
dents and teachers from 150 countries, and (4) an alternative open
account for better performance.
source implementation which uses web-workers, that may be a
The CMU CS Academy IDE, created by Stehlik et al.[33], may
useful approach in case of future changes to the web ecosystem.
be the most similar work to ours. Their platform offers a fully
Our methodology utilizes a Python-to-WebAssembly port library
in browser approach. The application transpiles a students code
in conjunction with custom package to enable a wide variety of
to Javascript using a version of Brython[2], then runs the code
features. These features include:
directly in the browser via a web worker. Their IDE supports a
• High fidelity interactive graphics and interactive mouse / set of custom libraries including one that displays graphics. They
touch input using a custom Python library. use an event based system, where the user can provide an onStep
• A line by line "replay" debugger that is compatible with the function, to provide smooth, interactive, graphics. Their solution for
graphics library. synchronous pausing includes custom sleep function that makes a
• Reactive program interruption and synchronous input while call to a server to block the programs execution. Additionally, their
running Python in the browser’s main thread. IDE does not support an input function. This description is based
• Entirely in the browser (serverless) interpretation and com- on the public documentation and playground editor. The CMU CS
pilation to WebAssembly. Academy’s goal is to offer several CS curriculum to students and
• Access to a broad set Python libraries written in C or CPython, teachers in grades K-12.
including Numpy [8], Pandas [9], and Scipy [12]. Another important prior work includes Philip Guo’s Online
• Shareable programs at no server runtime cost. Python Tutor [21] platform, which offers users the ability to see
• A file system that allows for storing diverse file types such each step of execution of their program. The user writes a program,
as images, text files, and CSVs. runs it, then gets access to the output, along with a set of frames
that they can step through. The user’s program is run on a server
and the resultant data is sent back to the user to be viewed. At each
2 RELATED WORK point they can view what line was last executed, what is next to be
Currently, many web based IDEs tailored to Computer Science Ed- executed, and the current state of the variable stack. The program
ucation exist for public and in course use [23, 34] and many others

584
PyodideU: Unlocking Python Entirely in a Browser for CS1 SIGCSE ’24, March 20–23, 2024, Portland, OR

Figure 1: PyodideU IDE Screenshot. Left, the IDE running a program, showing the file system with multiple file type support.
Right, the IDE in "Replay" debug mode showing scope variables, highlighted current line, graphics and mouse handling.

does allow for user input, but restricts the set of libraries that can also created an alternate solution that can be run using the stock
be used. Pyodide implementation. This solution uses Python’s ast (Abstract
Syntax Tree) module to modify the code to work in an asynchro-
3 SYSTEM DESCRIPTION nous environment. It does this by making all user functions and
In this section, we briefly describe the technical details of how our interactive library functions (e.g., Python’s input and [Link]
system works, along with its current implementation in the public functions) async and all calls to those functions are modified to
web based IDE, and any associated costs. use await. Because Pyodide natively supports async and await
using the asyncio library[1], this solution solves the WebAssembly
3.1 PyodideU blocking issue.
3.1.1 Main Thread. Our main system utilizes a combination of Once the user code has been translated, the Pyodide runtime exe-
Pyodide [31] along with a custom CPython package built off of the cutes the code such that the interactive functions work as expected.
Unthrow package, by Joe Marshall [28] to allow for synchronous As far as the user is concerned, the code runs as originally written,
pausing of the users program, along with access to info about the and when errors occur, the user’s unmodified code is shown to the
user’s program while running. All Python is run using a Pyodide user in the stack trace.
client to compile to WebAssembly. The program starts by running Both of the above listed methods will be open sourced in library
setup code, including the user’s program as a nested function. Then, form for anyone to freely use at [Link]
we run the users code within a try-except block, periodically throw- PyodideU.
ing "resumable" exceptions via a custom trace function. When an
exception is thrown, the user’s code is exited. The current stack 3.2 Implementation
frame of the users code at the time the trace function throws the
We use the first (main thread) system to run user code in several
exception is rolled up and saved as a class variable. At this point, we
places on an online platform built for CS1 courses. Primarily, we
transition from WebAssembly to Javascript, where we can handle
built a custom IDE to enable all of the functionality. Within the IDE,
synchronous events like input or interrupts. If no interrupts have
there is a terminal pane at the bottom, where the user can run code,
occurred, we reenter the users program by running a script that
see output, send input, and use a Python REPL. On the right side,
reinstates the stack. We can continue this process using callbacks
there is a collapsible pane which can contain unit test previews,
until the program ends either via finishing successfully, throwing a
a canvas, or other important graphical displays. On the left side,
(non-trace) exception, or being interrupted.
there is a multi-page tool bar, that contains documentation, file
We also use the trace function to save information for the "Re-
information, and assignment instructions. There is also a center
play" debug mode. In this mode, we collect the user’s scope, variable
pane which shows the currently open file. When the user is in
stack, any visual component, and output text state at the execution
"Replay mode", their variable stack appears in the left pane, the
of every line. With this, we can offer a step by step debugging mode,
programs output (up to their current step) appears in the terminal,
where the user can click, or scrub through their program.
and, if necessary, the current graphics state appears in their right
To implement libraries with a visual component, we created
pane. Finally, at the top of the page there is a start/stop button,
Python packages that would make direct calls to a Javascript client
along with a share button that publishes programs (see figure 1 for
(through WebAssembly callbacks) to update the state of the visual
details).
component during the program.
In addition to the IDE, we use our runtime system to run code
3.1.2 Async Webworker. In addition to our main solution, which in "Published" pages, which allow users to share the output of
requires Pyodide and a customized build of Unthrow [28], we have custom programs as well as in the forum where users can embed

585
SIGCSE ’24, March 20–23, 2024, Portland, OR Thomas Jefferson, Chris Gregg, & Chris Piech

code in posts. The implementations used for the courses utilized a

Firestore database to store all files (including Python, images, text,
etc.), however we will release a version that allows for local storing
so that no remote database is needed.

3.3 Associated Costs

Using our public IDE or the library associated with it will be com-
pletely free. If you choose to use the library in a platform, and need
to store user code, solutions are very cost effective. The system we
used ran at a rate of 150,000,000 database reads of user code per
dollar [13].

4 RESULTS
In our results section, we will cover the usage of our custom IDE and Figure 2: A 3-D maze game made by a student at the end of a
Python system, a comparison of the performance of our features course using our Python execution system. The program is
to other, current alternatives, and the responses from students and being run on a "Published" page. Note student Name, course
teachers of the courses that the tools were used in. name, and student image redacted.

4.1 Usage
Our PyodideU execution system, along with the IDE implementa- we conducted that assert the competitiveness of our systems, in the
tion presented in this paper have been used as the primary program- context of graphical programs and animation.
ming environment across five classes, including Stanford Univer- We compare our two systems (described in section 3), to five
sity’s CS106A: Programming Methodology, Code in Place, an online additional, currently available online systems. These five include the
CS1 course with over 9,000 students, and two international CS1 Pyodide Online Demo[10], the CMU Academy IDE[33], the Brython
courses including one taught in Spanish [7]. These courses have Online Demo[2], Python Tutor[21], and Replit[11]. Pyodide, as
resulted in a combined 10,000 students and teachers in 150 different we have discussed, is a leading Python to WebAssembly library,
countries using the software for assignments, practice, teaching, while Brython is a leading Python to Javascript transpiler. It is also
and personal projects. In total, over 350,000 unique projects have possible that any one of these programs offers more functionality
been created to date (including projects made by non-students or in a non public setting, however, we are basing these comparisons
teachers), and over 13,000 programs have been published using on only what is offered publicly.
our sharing functionality. During Code in Place, we registered over
4.1 million programs in the IDE. The course contained several pro- 4.2.1 Serverless Program Execution. Each of our two provided
gramming assignments written and unit tested with the PyodideU solutions have the ability to run completely offline. The only re-
system over six total weeks. The quantity of sustained use through- quirement, if the user is accessing the IDE from the web, is that they
out several course terms indicates the robustness of the application can load the web page. Alternatively, our methods could be pack-
and the underlying Python to WebAssembly library. Additionally, aged and run as a local application. Transpiler solutions, such as
the global use of the IDE indicates that it is a viable option for the CMU Academy IDE, and an unaltered version of Brython could
creating widely accessible courses, and educational experiences. accomplish the same feat, but platforms like Replit and Python
With the introduction of our system, we were able to offer custom Tutor require continued communication with the Server.
graphics libraries, in a cost effective and accessible manner. If we
had remained on a server based model, and introduced all of the 4.2.2 Interactive Graphics. Aside from our implementations,
additional functionality our IDE offered, we estimate that our server CMU Academy, and Replit each offer comparable, easy to grasp,
costs would have ballooned by many thousands of dollars based on interactive graphics libraries. Because Replit does not rely on run-
the amount of time code was run. Having this quantity, and diversity ning code in the browser, they offer access to TKinter while our
of users also allowed us to see quickly both the opportunities and implementation and CMU’s require custom graphics libraries com-
limitations of the system we had built. One great example is shown patible with the HTML Canvas. Python Tutor, along with unaltered
in Figure 2, a project a student published that depicted a 3-D maze Brython and Pyodide do not offer a direct graphics library. Both
game they had made using complex ray-casting algorithms. The Brython and Pyodide allow you to call Canvas editing functions.
program performs surprisingly well, displaying the 3-D world and However, due to the blocking nature of the two frameworks, creat-
allowing the player to move at a moderate speed. ing animations can be difficult.

4.2.3 Synchronous Interrupts (Allow for User Termination).

4.2 Feature Comparison Replit, the CMU Academy IDE, and both of our systems allow the
In this section, we offer a comparative analysis of the features user to trigger an interrupt during a program. Replit communicates
included in our systems versus the current alternatives that are with the server to terminate the program, while CMU and our
publicly available today. We will also discuss bench-marking tests PyodideU systems stop the code directly in the browser.

586
PyodideU: Unlocking Python Entirely in a Browser for CS1 SIGCSE ’24, March 20–23, 2024, Portland, OR

pauses all other code execution. Replit and Python Tutor have non-
blocking input functionality, due to the fact that they communicate
the input via server communication. In both of the systems we
have developed, the user can use Python’s native input function
without blocking interaction with other aspects of their window.

4.2.8 Access to C dependent Libraries. Using Pyodide, we can

offer users access to a selection of packages written partially or
completely in C or CPython without having to manually translate
the library. This is a feature that is distinctly unique from tran-
spilation systems, as there is not currently a robust solution for
transpiling C/CPython into vanilla Javascript. Using Emscripten
[5], however, we can compile the packages to be WebAssembly
compatible. While not all packages currently operate perfectly in
Figure 3: A matrix breaking down popular, publicly available,
WebAssembly (especially packages with visual, and synchronous
in browser Python editor environments by features. Note Py-
components), this drastically increases the scope of usable libraries
odideU solutions (shaded blue) are introduced in this paper.
in the browser. Server based systems naturally have the ability to
support most Python libraries.
4.2.4 Replay Debugger. Publicly, of the systems we compare,
only our PyodideU version and the Python Tutor allow for line 4.2.9 Benchmarking. To test performance of our general graph-
by line debugging. This includes letting the user step through the ics execution speed versus the already available solutions, we wrote
program and showing them the local variable map. Python Tutor a graphics animation program that scales up in the amount of ob-
utilizes a server to run the code and return the frames and out- jects it tracks on the canvas. The program simulates a collection of
put. What we believe is unique to our program, however, is the balls bouncing off of the wall. We compared main thread PyodideU,
ability to step through complex graphical programs, including our without debug collection, Replit, the CMU CS Academy IDE, and
graphics animation library, and our custom robot style program. native Python and collected the average duration of rendering a
Notably, we found one other system[35] that has visual debugging set of circles over 500 renders. We scaled the amount of circles
with transpilation, but it was highly limited in complexity and from 100 to 500 to simulate a fairly complex "bouncing balls" pro-
performance. gram. It is important to note that these programs were written in
slightly different ways to match the specific libraries they used.
4.2.5 File System. In our IDE, we used the built in Emscripten Each was meant to be as efficient as possible while still generating
[5] file system to interact with Python, and other text based file the animation.
types. We also built in additional functionality for our graphics The results (Figure 4) show that our solution offers strong perfor-
library to handle images. While libraries like Pyodide and Brython mance and remains within only several milliseconds per frame of
do offer FileSystem support, their online demos do not. The same is the alternatives. While it was not as fast as Native Python and Replit,
for Python Tutor and the CMU Academy IDE. Replit, on the other it tended to be similar or moderately better than transpilation based
hand, does allow for a diverse file system which is managed in their systems as the amount of shapes scaled up. It is also important to
database system. note that this graph does not capture any buffering or slowness
4.2.6 Main Thread Execution Without Crashing. To the best that occurred in Replit’s execution due to web web communication.
of our knowledge, our PyodideU is the only entirely in browser This speaks to the performance gain that WebAssembly offers over
Python to WebAssembly System that can run on the main thread traditional methods of browser based Python.
without fear of crashing on infinite loops. By running in the main Also note that this test was run using the Chrome Browser (for
thread, we have created a system with less configurations, that non-native programs) on a Macbook Pro with an M2 Pro Chip.
will hopefully make it easy to embed interactive Python code into
a web page. In addition to convenience, running code in a main 4.3 User Reactions
thread has performance benefits. When using Pyodide in a web
Across the classes, both students and teachers had positive re-
worker, the WebAssembly module must load which takes around
sponses to the IDE, and the tools within it. In Code in Place, many
2-5 seconds, and there is additional latency when communicating
students posted on the internal forums asking if they would have
with the main thread, affecting things like graphics. This issue also
continued access to the IDE after the course was complete. Ad-
occurs in transpilation based systems for which there exist some
ditionally, teachers were fans of the non-existent learning curve,
solutions that require tradeoffs in program performance.
stating on the teachers-only forum "The IDE looks modern and is
4.2.7 Non-blocking Input function. Blocking occurs when the easy to use for students and section leaders". They also suggested
browser prevents the users access to all parts of a page except for that it was a major improvement from the last time the course was
a single component. This occurs with native Javascript window held stating: "I was thrilled to see the new tools & the updated
functions like "prompt" and "alert". While both Brython and Pyodide IDE." Overall, reactions were overwhelmingly positive. In an in
have input functionality, they use the "prompt" function which person course taught in Colombia, when given the choice between

587
SIGCSE ’24, March 20–23, 2024, Portland, OR Thomas Jefferson, Chris Gregg, & Chris Piech

functionality that is available through Javascript is also available

through Python. As described in subsection 4.2.2, we have written
a graphics library that interfaces with an HTML5 Canvas, and we
have written mouse-handling routines, touch routines, keyboard
input routines, and sleep routines that enable running traditional
interactive programs with excellent performance, particularly in
an educational setting. The IDE also has the ability to highlight
lines of code in real time, aiding in teaching about program flow.
Python-to-WebAssembly allows for directly interfacing with the
DOM, as well, meaning that access to HTML buttons and input
elements (e.g., checkboxes, drop-down lists, etc.) is possible.
Figure 4: A Graph depicting the average time per render (mil- As mentioned in the previous subsection, the ability to share code
liseconds) of a set of balls in several bouncing ball programs. is significant. It has traditionally been difficult to share interactive,
As expected, our solution is slower than native Python, how- graphical Python programs across platforms. With a web-based
ever our animation speeds remain consistent as more shapes solution, students can share their code with friends, relatives, and
are added. The visual appearance remains smooth. the general public, and from a pedagogical standpoint, sharing "look-
what-I-did!" code can be meaningful and inspiring to beginners.
teaching through our PyodideU IDE or Pycharm [3] which was pre-
installed on all school computers, educators chose to teach through 5.3 Browser WebAssembly Unibiquity and
our IDE. They stated that it was easy for students to start writing Mobile Device Instruction
code immediately, was extremely useful for showing demos, and
WebAssembly is a strongly supported technology in today’s browsers
had powerful tools that were in an intuitive environment.
[15], including both desktop and mobile platforms, and nontradi-
tional browser-based operating systems, such as ChromeOS. We
5 PRACTICAL USE AND POSSIBILITIES
have written a version of our IDE to work on tablet and smartphone
There are a number of benefits to a browser-based Python runtime devices, as well. Indeed, it is possible for a student to learn to code
environment, which we will cover in this section. on our IDE completely from a smartphone, including entering and
debugging code. This could have significant positive impact for
5.1 Minimization of Server Costs and Security students whose only access to the Internet is through a smartphone
Issues, and Offline Use or tablet. The addition of an inexpensive Bluetooth keyboard would
Online IDEs that rely on server-side program execution have to provide an even better user interface.
contend with the fact that the server can use considerable resources
to run user code. This does not scale for large numbers of users, as 6 LIMITATIONS AND FUTURE WORK
the ability to provide high performance for user programs often
While we are encouraged by the quick success of the systems and
means that the number of servers must scale linearly with the
IDE we have put together, we recognize that there are quite a few
number of users, and can quickly become expensive. Furthermore,
areas for expansion and improvement. First, while we have collected
running user code on a server requires a significant amount of
a large amount of data on the usage of the IDE, and a many positive,
security, and it is virtually impossible to plan for all methods of
but anecdotal, reactions, we would like to do a more intensive study
potential server attacks.
regarding the preferences of students and teachers.
Using our PyodideU powered IDE, all user code runs in the
Further, while we feel this Web Python library and IDE does offer
user’s browser, and therefore there are zero server costs for actual
an experience similar to local development, it was not without bugs
code execution. This also allows for inexpensive sharing of code,
and limitations. Our system that runs exclusively in the main thread
where just the code text is provided, along with a minimal runtime
currently requires a trace function even when not in "Replay" mode
interface. Furthermore, the security issues are minimized (to the
which negatively impacts a programs runtime. While the speed of
point of being virtually nonexistent), as the server never runs any
the program is still very competitive, and in many cases, superior
untrusted code.
to alternative options, it could be faster. Further, currently, we run
An added benefit provided by a browser-based runtime is that
a version of Python 3.9, however, with a package upgrade, we could
once the website itself is loaded, users are able to disconnect from
convert to Pyodide’s newer versions which stay up to date with the
the Internet to write and run their code. This could be useful for
most recent Python Update.
students who are charged for data, or who have limited bandwidth
connections (e.g., in a developing country). It is also possible to
package the IDE onto physical media such as a flash drive, so that it ACKNOWLEDGMENTS
can be used without any Internet access (but still with a browser). This work would not have been possible without the help of the
Carina Foundation and the entire Code in Place team. Thank you
5.2 Interactivity to Joe Tey who was instrumental in developing much of the Code
Because the Pyodide runtime is able to interface directly with the In Place IDE interface. In addition, thank you to the [Link] team
Javascript and the browser’s Document Object Model (DOM), any for aiding the development of the initial prototypes.

588
PyodideU: Unlocking Python Entirely in a Browser for CS1 SIGCSE ’24, March 20–23, 2024, Portland, OR

REFERENCES [24] Caitlin Kelleher and Randy Pausch. 2005. Lowering the Barriers to Program-
[1] [n. d.]. Asyncio package, Asynchronous I/O. [Link] ming: A Taxonomy of Programming Environments and Languages for Novice
[Link] Programmers. ACM Comput. Surv. 37, 2 (jun 2005), 83–137. [Link]
[2] [n. d.]. Brython Editor. [Link] 1145/1089733.1089734
[3] [n. d.]. PyCharm: the Python IDE for Professional Developers. [Link] [25] Tobias Kohn and Bill Manaris. 2020. Tell Me What’s Wrong: A Python IDE with
[Link]/pycharm/ July, 2023. Error Messages. In Proceedings of the 51st ACM Technical Symposium on Computer
[4] 2015. CodeSkulptor3 About. [Link] Science Education (Portland, OR, USA) (SIGCSE ’20). Association for Computing
[5] 2015. Main — Emscripten 3.1.45-git (dev) documentation. [Link] Machinery, New York, NY, USA, 1054–1060. [Link]
org/[Link] 3366920
[6] 2023. Code in Place. [Link] [Online; accessed August- [26] Ali Malik, Juliette Woodrow, Brahm Capoor, Thomas Jefferson, Miranda Li,
2023]. Sierra Wang, Patricia Wei, Dora Demszky, Jennifer Langer-Osuna, Julie Ze-
[7] 2023. CSBridge. [Link] [Online; accessed August-2023]. lenski, Mehran Sahami, and Chris Piech. 2023. Code in Place 2023: Under-
[8] 2023. NumPy. [Link] standing learning and teaching at scale through a massive global classroom.
[9] 2023. pandas - Python Data Analysis Library. [Link] [Link]
[10] 2023. Pyodide REPL. [Link] [27] John Maloney, Mitchel Resnick, Natalie Rusk, Brian Silverman, and Evelyn East-
[11] 2023. Replit - Browser-based IDE. [Link] July, 2023. mond. 2010. The Scratch Programming Language and Environment. ACM Trans.
Comput. Educ. 10, 4, Article 16 (nov 2010), 15 pages. [Link]
[12] 2023. SciPy. [Link]
1868358.1868363
[13] 2023. Understand Cloud Firestore billing. [Link]
[28] Joe Marshall. 2021. Unthrow. [Link]
firestore/pricing
[29] Christopher Piech, Ali Malik, Kylie Jue, and Mehran Sahami. 2021. Code in place:
[14] 2023. Web Workers API - Web APIs | MDN. [Link]
Online section leading for scalable human-centered learning. In Proceedings of
US/docs/Web/API/Web_Workers_API
the 52nd acm technical symposium on computer science education. 973–979.
[15] 2023. WebAssembly. [Link]
[30] David Pritchard and Troy Vasiga. 2013. CS Circles: An in-Browser Python
[16] Aivar Annamaa. 2015. Introducing Thonny, a Python IDE for Learning Program-
Course for Beginners. In Proceeding of the 44th ACM Technical Symposium on
ming. In Proceedings of the 15th Koli Calling Conference on Computing Education
Computer Science Education (Denver, Colorado, USA) (SIGCSE ’13). Association
Research (Koli, Finland) (Koli Calling ’15). Association for Computing Machinery,
for Computing Machinery, New York, NY, USA, 591–596. [Link]
New York, NY, USA, 117–121. [Link]
1145/2445196.2445370
[17] Luciana Benotti, Federico Aloi, Franco Bulgarelli, and Marcos J. Gomez. 2018.
[31] Pyodide. 2023. pyodide/pyodide. [Link] [Online;
The Effect of a Web-Based Coding Tool with Automatic Feedback on Stu-
accessed August-2023].
dents’ Performance and Perceptions. In Proceedings of the 49th ACM Tech-
[32] Charlie Roberts, Jesse Allison, Daniel Holmes, Benjamin Taylor, Matthew Wright,
nical Symposium on Computer Science Education (Baltimore, Maryland, USA)
and JoAnn Kuchera-Morin. 2016. Educational design of live coding environments
(SIGCSE ’18). Association for Computing Machinery, New York, NY, USA, 2–7.
for the browser. Journal of Music, Technology amp; Education 9, 1 (2016), 95–116.
[Link]
[Link]
[18] Neil C. C. Brown, Pierre Weill-Tessier, and Michael Kölling. 2023. Strype:
[33] Mark Stehlik, Erin Cawley, and David Kosbie. 2020. CMU CS Academy: A
Frame-Based Python in the Browser. In Proceedings of the 54th ACM Tech-
Browser-Based, Text-Based Introduction to Programming through Graphics and
nical Symposium on Computer Science Education V. 2 (Toronto ON, Canada)
Animations in Python. In Proceedings of the 51st ACM Technical Symposium
(SIGCSE 2023). Association for Computing Machinery, New York, NY, USA, 1261.
on Computer Science Education (Portland, OR, USA) (SIGCSE ’20). Association
[Link]
for Computing Machinery, New York, NY, USA, 1420. [Link]
[19] Jonathan Cazalas, Max Barlow, Ibraheem Cazalas, and Chase Robinson. 2022.
3328778.3372541
MOCSIDE: An Open-Source and Scalable Online IDE and Auto-Grader for
[34] Alice Steinglass, Baker Franke, and Sarah Filman. 2017. App Lab: A Powerful
Computer Science Education. In Proceedings of the 53rd ACM Technical Sym-
JavaScript IDE for Rapid Prototyping of Small Data-Backed Web Applications
posium on Computer Science Education V. 2 (Providence, RI, USA) (SIGCSE
(Abstract Only). In Proceedings of the 2017 ACM SIGCSE Technical Symposium on
2022). Association for Computing Machinery, New York, NY, USA, 1114. https:
Computer Science Education (Seattle, Washington, USA) (SIGCSE ’17). Association
//[Link]/10.1145/3478432.3499125
for Computing Machinery, New York, NY, USA, 641–642. [Link]
[20] Stephen H. Edwards, Daniel S. Tilden, and Anthony Allevato. 2014. Pythy:
1145/3017680.3022382
Improving the Introductory Python Programming Experience. In Proceedings
[35] Nicole Trachsler. 2018. WebTigerJython - A Browser-based Programming IDE for
of the 45th ACM Technical Symposium on Computer Science Education (Atlanta,
Education. Master Thesis. ETH Zurich, Zurich. [Link]
Georgia, USA) (SIGCSE ’14). Association for Computing Machinery, New York,
000338593
NY, USA, 641–646. [Link]
[36] Hai T. Tran, Hai H. Dang, Kha N. Do, Thu D. Tran, and Vu Nguyen. 2013. An in-
[21] Philip J. Guo. 2013. Online Python Tutor: Embeddable Web-Based Program
teractive Web-based IDE towards teaching and learning in programming courses.
Visualization for Cs Education. In Proceeding of the 44th ACM Technical Sym-
In Proceedings of 2013 IEEE International Conference on Teaching, Assessment and
posium on Computer Science Education (Denver, Colorado, USA) (SIGCSE ’13).
Learning for Engineering (TALE). 439–444. [Link]
Association for Computing Machinery, New York, NY, USA, 579–584. https:
6654478
//[Link]/10.1145/2445196.2445368
[37] Martin Valez, Michael Yen, Mathew Le, Zhendong Su, and Mohammad Amin
[22] Andreas Haas, Andreas Rossberg, Derek L. Schuff, Ben L. Titzer, Michael Holman,
Alipour. 2020. Student Adoption and Perceptions of a Web Integrated Devel-
Dan Gohman, Luke Wagner, Alon Zakai, and JF Bastien. 2017. Bringing the
opment Environment: An Experience Report. In Proceedings of the 51st ACM
Web up to Speed with WebAssembly. SIGPLAN Not. 52, 6 (jun 2017), 185–200.
Technical Symposium on Computer Science Education (Portland, OR, USA) (SIGCSE
[Link]
’20). Association for Computing Machinery, New York, NY, USA, 1172–1178.
[23] Beate Jost, Markus Ketterl, Reinhard Budde, and Thorsten Leimbach. 2014. Graph-
[Link]
ical Programming Environments for Educational Robots: Open Roberta - Yet
[38] Jeong Yang, Young Lee, and Kai H. Chang. 2018. Evaluations of JaguarCode: A
Another One?. In 2014 IEEE International Symposium on Multimedia. 381–386.
web-based object-oriented programming environment with static and dynamic
[Link]
visualization. Journal of Systems and Software 145 (2018), 147–163. [Link]
org/10.1016/[Link].2018.07.037

589