Visual Educational Compiler: An Interactive Web-Based Tool for Visualising Compiler Design Phases

Abstract

The Visual Educational Compiler is designed to address the gap between theoretical understanding and practical experience in compiler design. Although students typically learn the roles of the lexer, parser, abstract syntax tree (AST), semantic analyser, and code generator, their understanding is often limited to conceptual diagrams and theoretical descriptions. The proposed system provides a visual, step-by-step representation of the compilation process, enabling students to observe the transformation of source code into tokens, an AST, semantic representations, and, ultimately, executable code. The system accepts programs written in a simplified teaching language that supports variables, integer arithmetic operations, conditional statements, and print functions. The compilation process is implemented in Python and consists of five phases: lexical analysis, parsing, AST construction, semantic analysis, and code generation. The final phase generates equivalent Python code. Each compilation phase is presented through a dedicated tab in the Streamlit-based interface, allowing students to inspect intermediate artifacts and compare outputs across different stages of compilation. Errors are reported by phase, enabling students to understand the specific responsibilities of each compiler component. Deliberate errors, including missing semicolons, undeclared variables, and type-related errors, were incorporated to demonstrate phase-specific error detection. The system was evaluated using ten programs of increasing complexity, along with their corresponding erroneous versions. The results showed that all syntactically valid programs successfully progressed through the complete compilation pipeline, while the introduced errors were detected at the appropriate compilation phases and accompanied by relevant diagnostic messages. The teaching language was intentionally designed with limited functionality to maintain transparency of the compilation process and avoid obscuring individual compiler phases within complex code. Future work will focus on extending the language capabilities and incorporating a dedicated code optimisation phase.