LEARN programming by visualizing code execution

Online Python Tutor is a free educational tool that helps students overcome a fundamental barrier to learning programming: understanding what happens as the computer executes each line of a program's source code. Using this tool, a teacher or student can write a Python program directly in the web browser and visualize what the computer is doing step-by-step as it executes the program.

For example, I wrote the following Python program to recursively find the sum of a linked list of numbers. Click the “Forward” button to see what happens as the computer executes one line of code at a time.

So far, over 200,000 people have used Online Python Tutor to understand and debug their programs, often as a supplement to learning from textbooks, lecture notes, and online programming tutorials.

In addition, instructors in over a dozen universities such as MIT, UC Berkeley, UC Davis, the University of Washington, the University of Toronto, the University of Waterloo, Luther College, and Swarthmore College have used it for teaching introductory computer science and programming courses.

Watch a video demo and interview with the instructor of UC Berkeley's introductory CS course.

I am actively seeking partnerships with educators at all grade levels to deploy and improve this tool. Email me, Philip Guo, at philip@pgbovine.net if you are interested in collaborating.

EMBED visualizations in digital textbooks

Using a single line of JavaScript code, you can embed an Online Python Tutor visualization within your web page (as shown in the “Learn” box above). The screenshot below shows a few of these visualizations embedded within the online textbook for the introductory CS course at UC Berkeley (CS61A):

These visualizations have also been embedded within two other web-based Python textbook projects: How to Think Like a Computer Scientist: Interactive Edition and Computer Science Circles. These textbooks collectively attract around 16,000 unique viewers per month and are being used in at least 25 universities around the world.

SHARE visualizations online

To share your current visualization, click the “Generate URL” button (at the bottom of this page) and paste that URL link in an email, social networking post, or forum question. When recipients click on that link, they will see your exact visualization. This feature is a more effective way for students to seek assistance than copying-and-pasting code snippets.

For example, clicking this link brings you directly to step 44 of 57 in a program that finds prime numbers using the Python for-else construct.

In the near future, I plan to add an online authoring environment so that you can save code examples and then create annotations, discussion threads, lessons, and interactive exercises on top of your visualizations.

More Details:

  • Online Python Tutor supports Python 2.7 and 3.3, hosted on either a CGI-capable web server or on Google App Engine
  • Main technologies: Python with bdb for the backend; HTML/CSS/JavaScript with jQuery, D3.js, jsPlumb, and CodeMirror for the frontend
  • Free, open-source BSD-licensed code on GitHub
  • Read the SIGCSE 2013 paper for more details.
  • Want to help out? I have ideas for student thesis projects or for anyone else who loves to hack. Email philip@pgbovine.net for more info.