CodeFlip
Open the visualizer
See what every line of code does to memory.
Step through a program and watch its variables, objects and pointers change, with one plain sentence per step.
Python, Java, C, C++, JavaScript and TypeScript. Free and open source, with no account and nothing to install.
The moments students get wrong, drawn plainly
Each of these is a real program, paused where it gets confusing. Step back and forward to see what changed, or open it in the visualizer and edit it.
Made to drop into a course
Free to use and embed anywhere, including commercial sites. Here is how it fits into what you already teach with.
Put a visualization in any page
Press Share in the visualizer to get a short link, an iframe, or a web component that sizes itself to the page. A link can open on the step you choose, at the start, or at the last step, where an error shows.
<script type="module" src="https://codeflip.dev/codeflip.js"></script>
<code-flip lang="python" step="4">
scores = [90, 72]
backup = scores
backup.append(85)
</code-flip>Add it to Canvas
CodeFlip is an LTI 1.3 tool. A Canvas admin installs it once; after that, teachers pick the program an assignment or module item shows, by pasting a CodeFlip or Python Tutor link or choosing an example. Students open it inside Canvas, with no account.
- AdminAdds CodeFlip with one registration URL.
- TeacherAdds an item and chooses the program.
- StudentSteps through it in the course page.
Keep your Python Tutor links
Change the domain and an existing link or iframe opens the same program on the same moment. The migration guide converts links for you, and back again if you ever want to return.
pythontutor.com/iframe-embed.html#code=… codeflip.dev/iframe-embed.html#code=…
Shape what students see
End a line with #break (or // break) and Next stops there. A
# pythontutor_hide: i comment keeps loop counters off the diagram. Live mode redraws as you type, and
programs can read input and text files.
How it runs
- In the learner's browser
- Python, JavaScript and TypeScript run entirely in the page. Java, C and C++ are compiled once on CodeFlip's server and cached, then run in the page: no student's program runs on a server.
- Explained for screen readers too
- Every step's sentence is announced, stepping works from the keyboard, and nothing relies on colour alone. Motion turns off when the system asks for less.
- Open source
- The libraries other sites embed are MPL-2.0; the hosted platform is AGPL-3.0. Embedding puts no obligations on your own code.