Python Tutor - Visualize Python, Java, JavaScript, TypeScript, Ruby, C, and C++ code execution

# VISUALIZE Python, Java, JavaScript, TypeScript, Ruby, C, and C++

Python Tutor, created by Philip Guo (@pgbovine), helps people overcome a fundamental barrier to learning programming: understanding what happens as the computer runs each line of source code.

Using this tool, you can write Python 2, Python 3, Java, JavaScript, TypeScript, Ruby, C, and C++ code in your web browser and visualize what the computer is doing step-by-step as it executes.

Over 3.5 million people in over 180 countries have used Python Tutor to visualize over 50 million pieces of code, often as a supplement to textbooks, lectures, and online tutorials.

Start visualizing your code now (or try live programming)

Here's a live example:

Read the research paper – Philip J. Guo. Online Python Tutor: Embeddable Web-Based Program Visualization for CS Education. SIGCSE 2013.

# GET LIVE HELP

Click the “Get live help!” button to allow anyone on the website to join your session, or start a private chat. Using this feature, you can chat about your code and navigate visualizations together to receive real-time tutoring. Watch this short video demo:

You can also click the “Generate permanent link” button (at the bottom of this page) and paste that link in an email, social networking post, or forum question. When recipients click on your link, they will see the exact visualization you've created. For example, clicking this link brings you directly to step 44 of 57 in a program that finds prime numbers using the `for-else` construct.

Read the paper – Philip J. Guo, Jeffery White, Renan Zanelatto. Codechella: Multi-User Program Visualizations for Real-Time Tutoring and Collaborative Learning. VL/HCC 2015.

# EMBED in any webpage

Using a single line of JavaScript code, you can embed a Python Tutor visualization within any webpage. The screenshot below shows a visualization embedded within the online textbook for the introductory CS course at UC Berkeley (CS61A):

Details:

Free, open-source BSD-licensed code on GitHub
View technical documentation online.
Main technologies: Python, CGI, Node.js, and Docker for run-time tracing backends; HTML/CSS/JavaScript with jQuery, D3.js, jsPlumb, TogetherJS, and Ace for the frontend