Compiler Visualizers

Explore how a compiler processes source code. Pick a language, edit the sample program, and hit Run. The lexer, parser, and bytecode panels populate from a live compile; then use the Playback controls to step through execution and watch the bytecode arrow, AST highlight, stack, and console stay in sync.

Interacting with the visualization:

• Click any AST node to link it to its tokens and bytecode.
• Use arrow keys in the AST panel: left/right for siblings, up for parent, down for first child.
• After a run, scrub or step through execution with the playback bar; the stack panel shows the reconstructed evaluation stack at each step.
• Click empty space in a panel or outside the visualizer to deselect.
• Drag inside the AST panel to pan the tree.

fun loopPrinter(addMe, minusMe) {
  var i = 0;
  while (i < 10) {
    print addMe + i - minusMe;
    i = i + 1;
  }
}

loopPrinter(5, (2 + 1));
print !true;
print true and false;

def loop_printer(add_me, minus_me):
    i = 0
    while i < 10:
        print(add_me + i - minus_me)
        i = i + 1

loop_printer(5, 2 + 1)
print(not True)
print(True and False)