Skip to content


Subversion checkout URL

You can clone with
Download ZIP
CoffeeScript JavaScript
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
app Renamed to
.gitattributes Added yeoman backbone template
.gitignore Fully switched over to yeoman 1.0.0beta3
.gitmodules switched codemirror esprima escodegen as bower packages
.npmignore Added yeoman backbone template
Gruntfile.js Fully switched over to yeoman 1.0.0beta3 Added read me
bower.json Switched to bower.json

Inventing On Principle





  • Clone this repo
  • Within the repo, run npm install && bower install
  • run grunt server to run the app


At a high level, the app uses Esprima to parse the source code within the code editor, analyzes the source code to extract out variable and function declarations and inserts trace statements, execute the source code, and then visualize the information collected with an interactive interface


Whenever there's a change in the source code, whether this is from the initial load of the template source file or actual editing, and there's no errors detected by JSHint, Esprima is used to parse the valid source code and the Abstract Syntax Tree (AST) is saved, along with other helpers attached to help transform the source code.


Then, variable and function declarations are extracted by traversing the AST. These declarations are subsequently wrapped in models and rendered as high level views of the declarations.

At the same time, scope information for the source code is computed and is then used to produce a list of variables that need to can be traced. The actual tracing generation is laid out in tracer module. The logic under genTraces specifies all the various expression types and how their values should be collected. The inserted trace statements call methods on the tracer to collect information during run time.


The code is run using eval. Here, a reference to the global object _ is also passed in so the underscore library can be used in the source code


The actual execution steps of the code are collected by tracing statements that make side effects and a slider is generated to allow for stepping through of the code path. At each step of the slider, the corresponding state at that step is rendered. There are 2 main ways of displaying this information:

  1. the scoped variable information are directly displayed as raw JSON
  2. for specific arrays, a D3 visualization is generated


This project is still in progress, with lots of room for improvement

  • Generalizing visualization modules to visualize different kinds of data, such as arrays, objects, etc.
  • Optimizing the control flow to be more resilient from errors
  • More code transformation tools, such as refactoring
  • Better displays of variable information and control flows
Something went wrong with that request. Please try again.