What is TraceyText?

TraceyText is an HTML-based teaching tool to visualize single-stepping through source code. This is a great tool for providing line-by-line explanations of code, along with its output and state of its variables.

TraceyText can also double as a text/HTML slideshow library implemented in JavaScript. With TraceyText's features, you can create web pages with a text or HTML slideshow and TraceyText will minimize the file size. TraceyText can also combine multiple "views" in the same slideshow to adjust in sync with each other.

The best way to understand what TraceyText is and what its capabilities are is to see it in action. Check out the demos.

TraceyText is freely available under a BSD-style license.

When is TraceyText Useful?

TraceyText is a useful tool for visualizing source code debugging with accompanying explanation text. TraceyText is also useful for any presentation/slideshow. TraceyText has an API which opens itself to user-created JavaScript as well. TraceyText's name comes from its original purpose as a way to demonstrate debugging traces through source code.

Some Demos


Draggable UI Demo

Source Code Stepper Demo

Go to the demos page for more information.